Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá mais uma vez,
Estou com um problema relativamente estranho, tenho alguns itens dentro de uma div pai que são gerados dinamicamente com php. Eu listei eles no css para que se exibissem um do lado do outro, como um float, só que usei o display: inline-block para isso. Funciona normal, só que em determinados itens ele apresenta uma estranha margem, o que fazer?
O Código HTML (Lembrando que o conteúdo é gerado por PHP dinamicamente):
<div class="produtos">
<div class="produto">
<img src="#" alt="" />
<div>
<h4><a href="#">Nome do produto</a></h4>
</div>
</div><!-- produto -->
</div><!-- produtos -->
E o código CSS:
.produtos{width:100%; height:auto; text-align:center;}
.produtos .produto{width:240px; height:300px; margin:10px 2px; display:inline-block; border:1px solid #ccc; border-radius:5px;}
.produtos .produto img{width:100%; height:150px; margin:0; padding:20px 0;}
.produtos .produto div{width:100%; height:100px; background-color:#f8f8f8;}
.produtos .produto div h4 a{color:#000;}
Aqui vai um print de como ficou o resultado:
Obrigado ;)
Donizeti, isso é um comportamento padrão do inline-block, mas você altera-lo com a propriedade vertical-align.
.produtos .produto {
vertical-align: top;
}
De uma lida melhor sobre essa propriedade
Obrigado Everson da Luz, eu desconhecia esse comportamento do inline-block. :)
Olá,
Eu estou com problemas também na propriedade display.
Neste exemplo, https://jsfiddle.net/ededev/rxmynrby/, tento criar duas colunas, uma ao lado da outra com a propriedade display. Estamos a discutir, neste tópico http://forum.imasters.com.br/topic/551984-header-com-duas-colunas-e-height-em/, o uso indevido da propriedade float para fazer colunas.
De poder dar uma ajuda agradeço.
Estou a seguir estes tutoriais:
[uPDATE]
Utilizar o parametro felx: https://jsfiddle.net/ededev/rxmynrby/1/