Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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:
/applications/core/interface/imageproxy/imageproxy.php?img=http://s18.postimg.org/63c6ecpwp/duvida_imasters.png&key=3e43fed16655a874d42d1a72b33748adeb93544b1ea7cb737e6dc01466a23200" alt="duvida_imasters.png" />
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! :hug:
Não estou com muito tempo para testar, mas tenta retirar o "position: absolute" da .box_shadow_preview
Obrigada pela resposta rikaschmitt, eu já havia tentando isso também, já fiz várias tentativas antes de perguntar aqui, mas não fica certo, o elemento precisa ter a posição absoluta senão causa outros erros. De qualquer forma agradeço muito pela atenção!
Então, agora consegui analisar melhor.
Uma dica importante é usar apenas um único ID em todo o documento. No seu caso você usou um mesmo ID em várias repetições, o que não pode. ID é único. Para isso utilize class mesmo.
Tentei modificar um pouco seu código..
consegui isso http://jsfiddle.net/m3851tcp/
talvez ajude.
>
Então, agora consegui analisar melhor.
Uma dica importante é usar apenas um único ID em todo o documento. No seu caso você usou um mesmo ID em várias repetições, o que não pode. ID é único. Para isso utilize class mesmo.
Tentei modificar um pouco seu código..
consegui isso http://jsfiddle.net/m3851tcp/
talvez ajude.
Nossa imagina se ajudou... ajudou demais!!!
Muito obrigada mesmo!!! :clap: :worship:
Valeu!
Não estou com muito tempo para testar, mas tenta retirar o "position: absolute" da .box_shadow_preview