Boa noite,
Tenho uma dúvida.
Estou criando um site mas os boxes onde o conteúdo é mais longo tem ficado da forma que mostra a imagem abaixo:
Segue abaixo o CSS:
#destaques_container{ margin: 0 auto; } #destaques_container_dentro{ float: left; margin-left: 25px; margin-bottom: 35px; display: inline; min-height: 190px; font-family: 'Signika', Arial, Verdana; font-size:16px; } .box_shadow_preview{ position: absolute; display: inline-block; min-height: 190px; background-color: #FFFFFF; border-width: 1px; border-style: solid; border-color: #DDDDDD; border-radius: 0px; -webkit-box-shadow: 2px 2px 16px 0px rgba(52, 84, 109, 0.65); -moz-box-shadow: 2px 2px 16px 0px rgba(52, 84, 109, 0.65); box-shadow: 2px 2px 16px 0px rgba(52, 84, 109, 0.65); -webkit-border-radius: 99px 20px 0px 20px;-moz-border-radius: 99px 20px 0px 20px;border-radius: 99px 20px 0px 20px; } #destaques_line{ width: 100%; display: block; clear: both; } @media screen and (max-width: 1024px) { #destaques_container{ width: 1002px; } #destaques_container_dentro{ width: 46%; font-size:16px; } .box_shadow_preview{ width: 46%; } }
Segue abaixo o código das divs:
<div id="destaques_container_dentro"> <div class="box_shadow_preview"> <div id="destaques_line"> <br /><br /><br /><br /><br /><br /><br /><br /><br /> </div> </div> </div> <div id="destaques_container_dentro"> <div class="box_shadow_preview"> <div id="destaques_line"> <br /><br /><br /><br /><br /> </div> </div> </div> <div id="destaques_container_dentro"> <div class="box_shadow_preview"> <div id="destaques_line"> <br /><br /><br /><br /><br /> </div> </div> </div> <div id="destaques_container_dentro"> <div class="box_shadow_preview"> <div id="destaques_line"> <br /><br /><br /><br /><br /> </div> </div> </div>
Poderiam por favor me ajudar com alguma dica de que recurso utilizar para que quando um box tiver o conteúdo maior, os seguintes fiquem mais distantes como ocorre quando o box está com a altura máxima de 190px.
Desde já agradeço pela atenção de todos!