文字排版

by 苹果熊

HTML

<div class="wrap">
  <div class="inner">
    <img src="http://a4.topitme.com/m/201004/07/12705711655097.jpg" />
    <p>啦啦啦德玛西亚啦啦啦德玛西亚啦啦啦德玛西亚啦啦啦德玛西亚啦啦啦德玛西亚</p>
  </div>
  <p>(in sports) a game whose outcome does not affect a team's standing, typically one played before the start of a regular season</p>
  <table width="100%">
    <tr>
      <td>姓名</td>
      <td>学校名称</td>
      <td>来自哪个国家来自哪个国家来自哪个国家来自哪个国家</td>
      <td>年龄/性别</td>
      <td>出生日期</td>
    </tr>
  </table>
  <ul>
    <li>只有一个列表项</li>
  </ul>
  <ul>
    <li>2个列表项</li>
    <li>2个列表项</li>
    <li>2个列表项</li>
  </ul>
  <footer>页脚</footer>
</div>

CSS

.inner {
  width: min-content;
  border: 1px solid #ccc;
  padding: 1em;
  text-align: justify;
}
table {
  border-left: 1px solid #ccc;
  border-top: 1px solid #ccc;
  table-layout: fixed;
}
td {
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  padding: 1em;
}
td:nth-child(1) {
  width: 2em;
}
td:nth-child(2) {
  width: 4em;
}
td:nth-child(4) {
  width: 4em;
}
td:nth-child(5) {
  width: 4em;
}
ul li:only-child {
  background: #390
}
ul li:first-child ~ li {
  color: red
}
footer {
  background: #333;
  color: #fff;
  text-align: center;
  margin: 1em calc(50% - 500px)
}