Estou utilizando flexbox para mostrar imagens, porém ele lista todas em uma linha só, gostaria de poder exibir 3 imagens por linha.
Estrutura HTML:
<section class="content">
<?php
$i=0;
$sql = mysql_query("SELECT * FROM slideshows");
while($result = mysql_fetch_array($sql)){
$imagem = $result['imagem'];
$titulo = $result['titulo'];?>
<div class="item"><img src="<?php echo $imagem; ?>"></div>
<?php }?>
</section>
CSS:
.content{
width: 100%;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-around;
}
.item{
width:303px; height: 242px;
display: block;
}
Estou usando um estilo de paginação para exibir as imagens, esta tudo certo, porem, esta exibindo tudo na mesma linha, gostaria que mostrasse 3 por linhas...
http://planow.com.br/jrgrill/dicas.php
php para exibir com a paginacao:
$outputList = '';
while($row = mysql_fetch_array($sql2)){
$id = $row["id"];
$imagem = $row["imagem"];
$nome = $row["nome"];
$nome = utf8_encode($nome);
$outputList .= '<section class="content"><div class="item"><img src="admin/images/' . $imagem . '"></div><div class="caixa-texto">' . $nome . ' </div></section>';
} // close while loop ?>
<div class="imagens-dicas-churrasco">
<?php print "$outputList"; ?>
</div>
<div style="padding:6px;float:right;"><?php echo $paginationDisplay; ?></div>