Como faço para criar uma tabela lá, o fluxo de células em vez de usar uma grade rígida?

Question

Estou tendo problemas para criar o layout que gostaria para um site. Não tenho muita experiência com o Web Design e o único software que tenho é a página frontal que parece não fazer o que eu quero.

Estou tentando criar uma página com várias "células", cada uma contendo uma imagem na parte superior com texto centrado abaixo. Quero que cada célula tenha uma largura fixa e gostaria de fazer com que as células sigam um "fluxo" normal, colocado um ao outro (por exemplo, como as imagens embutidas), e essas células envolvem se não houver suficiente Largura para ajustá -los a todos em uma linha (novamente, como as imagens embutidas).

A primeira coisa que vem à mente é uma tabela, mas uma tabela tem uma estrutura rígida de linhas e colunas, em vez de fluir e embrulhar.

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 */
}

Ver demonstração.

Answer 2

Eu acho que o Costumeiro A abordagem para alcançar essa aparência, neste ponto da história, é uma UL (lista não ordenada). Dê uma olhada nas demos para o Plugin Galleria. Cada um deles possui um grupo de miniaturas que renderizam quase exatamente como você descreve (você terá que adicionar texto abaixo).