通过CSS / HTML在左边框中显示文本

Question

I have a webpage written in HTML5 utilizing CSS from W3Schoools. 我有一个使用W3Schoools的CSS用HTML5编写的网页。 The content is two tables inside a tag. 内容是标签内的两个表。 The tag has the border and I would like to add into the border a text tag of some sort which reads on of the following four seasons of the year. 标签带有边框，我想在边框中添加某种类型的文本标签，该标签在一年的以下四个季节中都会读取。 Which tag should I use or how can I accomplish this? 我应该使用哪个标签，或者该如何完成？ Thank you for your help. 谢谢您的帮助。 Also the season will be styled as a column of single letters. 同样，该季节将样式设置为单个字母的列。

I want my page to look like the below Image. 我希望页面看起来像下面的图像。 I have added the snippet what I have tried so far. 我已经添加了到目前为止已经尝试过的代码片段。 Please some one help me to achieve this. 请有人帮助我实现这一目标。

 body { width: 1200px; font-size: .9335rem } .ml-300 { width: 950px; margin: 10px 0px 10px 250px; border-left: 60px solid; border-top: 15px solid; border-bottom: 15px solid; border-radius: 15px; } .ml-150 { width: 950px; margin: 10px 0px 10px 125px; border-left: 60px solid; border-top: 15px solid; border-bottom: 15px solid; border-radius: 15px; } .artLst tr td:last-child { padding: 2.5px 0px 2.5px 15px; } td img { margin-left: 0px auto; margin-right: 0px auto; }

 <link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet" /> <body> <div id="winter" class="w3-row ml-300"> <div class="w3-twothird"> <table class="artLst"> <tbody> <tr> <td>01/23/17</td> <td>USS Makin Island Provides Medical Assistance to Pakistani Sailor</td> </tr> <tr> <td>02/03/17</td> <td>US Japan Successfully Conduct First SM-3 Block IIA Intercept Test</td> </tr> <tr> <td>02/12/17</td> <td>Navy Christens Future Tulsa</td> </tr> <tr> <td>03/01/17</td> <td>USS Dewey Fires SM-2 Missile during MISSILEX</td> </tr> <tr> <td>03/07/17</td> <td>Navy Conducts Successful Missile Test Firing</td> </tr> <tr> <td>03/07/17</td> <td>“Speed-to-Fleet” Answered the Call: Missiles On-Target “Skin to Skin”</td> </tr> <tr> <td>03/23/17</td> <td>USS Lake Erie Assists Distressed Mariners</td> </tr> <tr> <td>03/29/17</td> <td>USS Princeton Participates in Show of Force Strait Transit Exercise</td> </tr> <tr> <td>03/31/17</td> <td>Ross, Porter Conduct TLAM Strikes into Syria</td> </tr> </tbody> </table> </div> <div class="w3-third"> <table> <tbody> <tr> <td><img src="https://dummyimage.com/140x120.jpg" /></td> <td><img src="https://dummyimage.com/140x120.jpg" /></td> </tr> <tr> <td><img src="https://dummyimage.com/140x120.jpg" /></td> <td><img src="https://dummyimage.com/140x120.jpg" /></td> </tr> </tbody> </table> </div> </div> </body>

Answer 1

You could use the id attribute value to retrieve the text to print and use word-break to set letters on top of each others . 您可以使用id属性值来检索要打印的文本，并使用分word-break将字母设置在彼此之上。

#winter:before {
  content: attr(id);
  color: white;
  font-size: 50px;
  word-break: break-all;
  width: 0.7em;
  line-height: 0.8em;
  text-align: center;
}

position:absolute; & margin or display:table/table-cell; ＆ margin或display:table/table-cell; & transform can be used to set the text on the left. ＆ transform可用于在左侧设置文本。

Demos below 下面的演示

display:table;

 body { width: 1200px; font-size: 0.9335rem; } .ml-300 { width: 950px; margin: 10px 0px 10px 250px; border-left: 60px solid; border-top: 15px solid; border-bottom: 15px solid; border-radius: 15px; } .ml-150 { width: 950px; margin: 10px 0px 10px 125px; border-left: 60px solid; border-top: 15px solid; border-bottom: 15px solid; border-radius: 15px; } .artLst tr td:last-child { padding: 2.5px 0px 2.5px 15px; } td {padding:1em 0;} td img { margin-left: 0px auto; margin-right: 0px auto; } #winter { display:table; table-layout:fixed; } #winter:before { content: attr(id); color: white; display:table-cell; transform:translateX(-50px); vertical-align:middle; font-size: 50px; word-break: break-all; width: 0.7em; line-height: 0.8em; text-align: center; }

 <div id="winter" class="w3-row ml-300"> <div class="w3-twothird"> <table class="artLst"> <tbody> <tr> <td>01/23/17</td> <td>USS Makin Island Provides Medical Assistance to Pakistani Sailor</td> </tr> <tr> <td>02/03/17</td> <td>US Japan Successfully Conduct First SM-3 Block IIA Intercept Test</td> </tr> <tr> <td>02/12/17</td> <td>Navy Christens Future Tulsa</td> </tr> <tr> <td>03/01/17</td> <td>USS Dewey Fires SM-2 Missile during MISSILEX</td> </tr> <tr> <td>03/07/17</td> <td>Navy Conducts Successful Missile Test Firing</td> </tr> <tr> <td>03/07/17</td> <td>“Speed-to-Fleet” Answered the Call: Missiles On-Target “Skin to Skin”</td> </tr> <tr> <td>03/23/17</td> <td>USS Lake Erie Assists Distressed Mariners</td> </tr> <tr> <td>03/29/17</td> <td>USS Princeton Participates in Show of Force Strait Transit Exercise</td> </tr> <tr> <td>03/31/17</td> <td>Ross, Porter Conduct TLAM Strikes into Syria</td> </tr> </tbody> </table> </div> <div class="w3-third"> <table> <tbody> <tr> <td><img src="https://dummyimage.com/140x120.jpg" /></td> <td><img src="https://dummyimage.com/140x120.jpg" /></td> </tr> <tr> <td><img src="https://dummyimage.com/140x120.jpg" /></td> <td><img src="https://dummyimage.com/140x120.jpg" /></td> </tr> </tbody> </table> </div> </div>

https://codepen.io/gc-nomade/pen/jaVdWQ https://codepen.io/gc-nomade/pen/jaVdWQ

or position:absolute also based ont the pseudo and id value: 或position:absolute也基于伪值和id值：

 body { width: 1200px; font-size: 0.9335rem; } td {padding: 1em 0;} .ml-300 { width: 950px; margin: 10px 0px 10px 250px; border-left: 60px solid; border-top: 15px solid; border-bottom: 15px solid; border-radius: 15px; } .ml-150 { width: 950px; margin: 10px 0px 10px 125px; border-left: 60px solid; border-top: 15px solid; border-bottom: 15px solid; border-radius: 15px; } .artLst tr td:last-child { padding: 2.5px 0px 2.5px 15px; } td img { margin-left: 0px auto; margin-right: 0px auto; } #winter { position: relative; } #winter:before { content: attr(id); color: white; position: absolute; left: -50px; font-size: 50px; word-break: break-all; width: 0.7em; line-height: 0.8em; text-align: center; }

 <div id="winter" class="w3-row ml-300"> <div class="w3-twothird"> <table class="artLst"> <tbody> <tr> <td>01/23/17</td> <td>USS Makin Island Provides Medical Assistance to Pakistani Sailor</td> </tr> <tr> <td>02/03/17</td> <td>US Japan Successfully Conduct First SM-3 Block IIA Intercept Test</td> </tr> <tr> <td>02/12/17</td> <td>Navy Christens Future Tulsa</td> </tr> <tr> <td>03/01/17</td> <td>USS Dewey Fires SM-2 Missile during MISSILEX</td> </tr> <tr> <td>03/07/17</td> <td>Navy Conducts Successful Missile Test Firing</td> </tr> <tr> <td>03/07/17</td> <td>“Speed-to-Fleet” Answered the Call: Missiles On-Target “Skin to Skin”</td> </tr> <tr> <td>03/23/17</td> <td>USS Lake Erie Assists Distressed Mariners</td> </tr> <tr> <td>03/29/17</td> <td>USS Princeton Participates in Show of Force Strait Transit Exercise</td> </tr> <tr> <td>03/31/17</td> <td>Ross, Porter Conduct TLAM Strikes into Syria</td> </tr> </tbody> </table> </div> <div class="w3-third"> <table> <tbody> <tr> <td><img src="https://dummyimage.com/140x120.jpg" /></td> <td><img src="https://dummyimage.com/140x120.jpg" /></td> </tr> <tr> <td><img src="https://dummyimage.com/140x120.jpg" /></td> <td><img src="https://dummyimage.com/140x120.jpg" /></td> </tr> </tbody> </table> </div> </div>

https://codepen.io/gc-nomade/pen/vWybWW https://codepen.io/gc-nomade/pen/vWybWW

通过CSS / HTML在左边框中显示文本

问题描述

1 个解决方案

解决方案1
0 已采纳 2017-11-09 20:32:45

通过CSS / HTML在左边框中显示文本

问题描述

1 个解决方案

解决方案1 0 已采纳 2017-11-09 20:32:45

解决方案1
0 已采纳 2017-11-09 20:32:45