colunas em css - não está funcionando
Não estou conseguindo que as divs apareçam em colunas, vea se pode me ajudar com este código:
<html>
<div class="container">
<div class="coluna1">
<img src="Camiseta1.jpg" heigth="250" width="250">
<p>
<a href="http:">Detalhes</a><img src="lupa.jpg" height="30" widht="30">
<a href="http:">Colocar na cesta</a><img src="cesta2.png" height="30" widht="30"></li>
</p>
</div>
<div class="coluna2">
<img src="Camiseta5.jpg" heigth="250" width="250">
<p>
<a href="http:">Detalhes</a><img src="lupa.jpg" height="30" widht="30">
<a href="http:">Colocar na cesta</a><img src="cesta2.png" height="30" widht="30"></li>
</p>
</div>
<div class="coluna3">
<img src="Camiseta9.jpg" heigth="250" width="250">
<p>
<a href="http:">Detalhes</a><img src="lupa.jpg" height="30" widht="30">
<a href="http:">Colocar na cesta</a><img src="cesta2.png" height="30" widht="30"></li>
</p>
</div>
<div class="clear>
</div>
<div class="coluna1">
<img src="Camiseta1.jpg" heigth="250" width="250">
<p>
<a href="http:">Detalhes</a><img src="lupa.jpg" height="30" widht="30">
<a href="http:">Colocar na cesta</a><img src="cesta2.png" height="30" widht="30"></li>
</p>
</div>
<div class="coluna2">
<img src="Camiseta5.jpg" heigth="250" width="250">
<p>
<a href="http:">Detalhes</a><img src="lupa.jpg" height="30" widht="30">
<a href="http:">Colocar na cesta</a><img src="cesta2.png" height="30" widht="30"></li>
</p>
</div>
<div class="coluna3">
<img src="Camiseta9.jpg" heigth="250" width="250">
<p>
<a href="http:">Detalhes</a><img src="lupa.jpg" height="30" widht="30">
<a href="http:">Colocar na cesta</a><img src="cesta2.png" height="30" widht="30"></li>
</p>
</div>
<div class="clear>
</div>
<div class="coluna1">
<img src="Camiseta1.jpg" heigth="250" width="250">
<p>
<a href="http:">Detalhes</a><img src="lupa.jpg" height="30" widht="30">
<a href="http:">Colocar na cesta</a><img src="cesta2.png" height="30" widht="30"></li>
</p>
</div>
<div class="coluna2">
<img src="Camiseta5.jpg" heigth="250" width="250">
<p>
<a href="http:">Detalhes</a><img src="lupa.jpg" height="30" widht="30">
<a href="http:">Colocar na cesta</a><img src="cesta2.png" height="30" widht="30"></li>
</p>
</div>
<div class="coluna3">
<img src="Camiseta9.jpg" heigth="250" width="250">
<p>
<a href="http:">Detalhes</a><img src="lupa.jpg" height="30" widht="30">
<a href="http:">Colocar na cesta</a><img src="cesta2.png" height="30" widht="30"></li>
</p>
</div>
<div class="clear>
</div>
</div>
e no CSS:
.clear{
clear:both;
}
.coluna1, .coluna2, .coluna3 {
width: 250px;
padding: 10px;
float: left;
}
.coluna2{
margin-left:30px;
margin-right:30px;
}Discussão (4)
Carregando comentários...