Estou tentando deixar três imagens por linha em uma página, defini isso no corpo da página:
<div class="produtos-ponta">
<div class="produtos-conteudo-ponta one-fourth-ponta"><img class="photo" src="imagens-ponta/amsterdam.jpg"/>
<div class="content">
<h4 class="name">Descricao</h4>
</div>
</div>
<div class="produtos-conteudo-ponta one-fourth-ponta"><img class="photo" src="imagens-ponta/arezzo.jpg"/>
<div class="content">
<h4 class="name">Descricao</h4>
</div>
</div>
<div class="produtos-conteudo-ponta one-fourth-ponta"><img class="photo" src="imagens-ponta/belmont.jpg" />
<div class="content">
<h4 class="name">Descricao</h4>
</div>
</div>
</div>
E isso no meu css:
.produtos-conteudo-ponta {
position:relative;
text-align: center;
margin-bottom: 20px;
height: 320px;
float:left;
}
.produtos-conteudo-ponta .photo {
max-width:320px;
max-height:196px;
width: auto;
height: auto;
}
.produtos-ponta {
position:relative;
}
.one-fourth-ponta {
width: 20.5%;
max-width: 320px;
}
Mas as imagens quebram a linha, gostaria de deixa-las em somente uma.
A página para visualização é essa: Página