Как создать таблицу, в которой ячейки текут / оборачиваются, а не используют жесткую сетку?

Question

У меня проблемы с созданием макета, который мне нужен для веб-сайта. У меня нет большого опыта в веб-дизайне, и единственное программное обеспечение, которое у меня есть, это FrontPage, которое, кажется, не выполняет то, что я хочу.

Я пытаюсь создать страницу с несколькими «ячейками», каждая из которых содержит изображение сверху с текстом по центру внизу. Я хочу, чтобы каждая ячейка имела фиксированную ширину, и я хотел бы, чтобы ячейки следовали за обычным «потоком», размещенным рядом друг с другом (например, как встроенные изображения), и чтобы эти ячейки были обернуты, если их недостаточно ширина, чтобы разместить их все на одной строке (опять же, как встроенные изображения).

Первое, что приходит на ум, - это таблица, но таблица имеет жесткую структуру строк и столбцов, а не обтекание и перенос.

Answer 1

HTML:

<div class="cell"><img src="img1.png" ...><br>Capture 1</div>
<div class="cell"><img src="img2.png" ...><br>Capture 2</div>
<div class="cell"><img src="img3.png" ...><br>Capture 3</div>
<!-- and so on -->

CSS:

.cell {text-align:center;
       width:200px; /* or whatever you want */
       float:left;
       /* add margin, padding, border style if you wish */
}

См. демо .

Answer 2

Я думаю, что обычный подход для достижения этого взгляда на данный момент в истории - это ul (неупорядоченный список). Взгляните на демонстрации для Galleria Plugin . У каждого из них есть группа миниатюр, которые отображаются почти так же, как вы описываете (вам придется добавить текст ниже).