多行跨度行为元素

Question

我想显示一个复杂但固定大小的多行元素的列表,假设它们将在到达行结束时包装页面行,使它们n在每行中显示, n取决于页面宽度.就像是:

Mary had    Mary had    Mary had
a little    a little    a little
LAMB        LAMP        WHISKEY


Mary had
a little
TOO MUCH

我该怎么办？

Answer 1

inline-block 跨度应该这样做:

body {
  font-family: sans-serif;
}
#container span {
  display: inline-block;
  width: 5em;
  border: 1px solid black;
}

<div id='container'>
  <span>Mary had a little lamb</span>
  <span>Mary had a little lamb</span>
  <span>Mary had a little lamb</span>
  <span>Mary had a little lamb</span>
  <span>Mary had a little lamb</span>
  <span>Mary had a little lamb</span>
  <span>Mary had a little lamb</span>
  <span>Mary had a little lamb</span>
  <span>Mary had a little lamb</span>
  <span>Mary had a little lamb</span>
  <span>Mary had a little lamb</span>
  <span>Mary had a little lamb</span>
  <span>Mary had a little lamb</span>
  <span>Mary had a little lamb</span>
  <span>Mary had a little lamb</span>
</div>
</body>

</html>

Answer 2

使用的组合display: block; float:left;和你想要的width和height.

span {
    display: block;
    float: left;
    height: 100px;
    width: 100px;
}