多行跨度元素的行为

Question

我想显示一个由复杂的、但是固定大小的多行元素组成的列表，假设当到达行尾时它们会自动换行，使它们以每行n个的形式呈现，其中n取决于页面的宽度。类似于：

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


Mary had
a little
TOO MUCH

我应该如何做到这一点？

- alemjerus

Answer 1

行内块元素应该可以解决它：

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>

- T.J. Crowder

---

需要注意的是，在IE6中inline-block不起作用 :-) - Andy E

@Andy E：实际上，它确实可以 - 但是IE6只允许您在通常默认为“inline”的元素上设置inline-block，而不是在通常默认为“block”的元素上设置。我对这个例子记错了，所以现在我已经修复了。 :-) - T.J. Crowder

@Andy：谢谢你，还有提醒我IE6的问题！ - T.J. Crowder

有没有一种方法可以换行长单词？比如，如果我添加一个<span>Mary had a little jumbomambopeekaboolamb</span>。 - gilhad

@gilhad：添加overflow-wrap: break-word;就可以解决这个问题了，更多信息。 - T.J. Crowder

Answer 2

使用 display: block;、float:left; 和您所需的 width 和 height 的组合。

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

- Andy E

---

@T.J. 是的，我能理解你的感受，虽然我不知道 inline-block 在 IE6 上也可以工作，哈哈。 - Andy E