Eu tenho tres divs com display inline-block,quando eu insiro uma imagem,exemplo: na primeira div,as outras duas divs descem a metade do tamanho da primeira div.
tenho andado sem tempo de estudar css.
agradeço se alguem puder ajudar!
obrigado!!
Se você postasse os códigos seria mais interessante e mais fácil de resolver o problema, mas sem problemas, vamos lá…vou tentar passar umas dicas de como resolver…Espero que ajude!
Pelo que você falou, Ao inserir uma imagem dentro de uma DIV INLINE-BLOCK , alguma coisa faz as outras DIV descerem certo?
Faz o seguinte, coloca uma cor no fundo dessas DIVs e vê se a imagem está esticando o WIDTH dela…
Verifique com Inspector do seu navegador [ Geralmente a tecla F12 é o atalho para o inspector ] se as DIVS tem MARGINS, geralmente representsdas pela cor amarela em volta da DIV.
Já tentou usar o Float ao invês do INLINE-BLOCK? Acho pode resolver o problema.
Você pode definir um WIDTH para essas DIVs para evitar que elas tenham o tamanho 100% que é o padrão das DIVs.
Olá Renato! agradeço por tentar ajudar,entao! é o seguinte eu estou tentando achar uma explicaçao,mas até agora nada,as vezes eu costumo brincar com css e acabo achando essas quebras que acontecem,mas eu gosto de saber o porque aconteceu.
Postei o codigo no code pen,se quiser da uma olhada pra tentar entender o erro,agradeço.
Obrigado pela ajuda.http://bit.ly/2fLQXyY
Dá uma estudada sobre a propriedade float, por exemplo: http://www.w3schools.com/cssref/pr_class_float.asp
Seu código atualizado: http://codepen.io/anon/pen/pNyaxq
Olá javaflex!! obrigado pela resposta! mas eu estou procurando uma explicaçao,até agora o que eu entendi é que a div com display inline-block, segue o fluxo do seu filho ,nesse caso a imagem é menor que a div,entao ela desce até se alinhar as outras divs.tomando como referencia a imagem,acho que esse é um comportamento herdado do inline.
Estou sem condições de verificar o problema com o inspector, estou sem PC e sem Note, mas eu resovi esse erro com pelo site que você mandou o código com FLOAT: LEFT;
Não sou formado na área de programação, o que sei , aprendi na prática em casa, então minha resposta pode ser vaga, mas vamos lá!
Supondo que sua DIV não tem WIDTH definido, ela inicia com um WIDTH 100% por padrão, se você colocar uma imagem dentro dessa DIV e atribuir o FLOAT:LEFT para ela, o tamanho da DIV será igual ao tamanho da Imagem que está dentro dela… O FLOAT força os elementos se ajustarem ao lado escolhido, sendo assim, se você tem muitos elementos com FLOAT, eles serão tipo um INLINE-BLOCK, o resultado é quase o mesmo, ma semântica não é a mesma…
No seu código, eu removi o DISPLAY e usei apenas o FLOAT, as DIVs se alinharam perfeitamente, isso porque o FLOAT é uma forma bruta, durona de alinhamento de objetos.
Na minha opinião, uma boa forma de usar o INLINE-BLOCK, seria em elementos em que a semârtica é mais coerente. Exemplo: uma UL com suas Lis, foram projetadas para serem uma Lista, daí, se eu aplicar um INLINE-BLOCK, ela tem maior flexibilidade para se ajustar em linha do que uma DIV
Dica: Tenta colocar essas DIVs dentro de Lis com INLINE-BLOCK pra ver o resultaddo, criee a UL e as DIVS no LI, faça esse teste com float também para ver o resultado.
Estude FLOAT e suas propriedas, CLEAR: BOTH, LEFT nos links que o javaflex mandou, com certeza vai ajude muito.
Creio que não fui muito técnico na resposta, mas a ideia é mais ou menos essa.
Bons estudos, você consegue!
1 curtida
@Renato122 explicou bem. No mais, se concentre em atender a funcionalidade, software não é física, siga a técnica que foi especialmente feita para isso funcionar bem conforme o esperado.
1 curtida
Vlw @javaflex @Renato122 obrigado por tentar ajudar.
Batendo a cabeça eu compreendi,como o display inline-block herda propriedades inline,é so usar o vertical-align que fica tdo ajustado.
Eu to testando algumas maneiras de criar grids e estou aplicando inline-block nas colunas, pq o float nao tem cmo vc controlar 100%.
É so testando que a gente encontra esse tipo de quebra.
Na proxima vez eu vou tentar passar o grau da duvida,fica mais facil pra quem quiser ajudar.
Mas obrigado novamente!!
1 curtida