Многострочные элементы поведения

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;
}