Jump to content
  • Revista PROGRAMAR: Já está disponível a edição #60 da revista programar. Faz já o download aqui!

charly

Problema com DIV e Float

Recommended Posts

charly

Olá pessoas,

já a umas semanas que venho a procura da resposta para este problema ao qual nao encontro

Imaginem nada mais  nada menos que o seguinte:

<div>
  <img src="http://lalalla.com/xpto.png" style="width: 100px; height: 100px; float: left;">
  Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto.
</div>

<div>
  <img src="http://lalalla.com/xpto.png" style="width: 100px; height: 100px; float: left;">
  Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto.
</div>

Pelo que poderão estar a ver, inicialmente não tem problema, mas ele aparece quando passado para a visualização do browser.

Após a inserção do float como um style da imagem, esta deixa de forçar a altura da div a ser no minimo igual à sua temperatura, o que acontece é que  a div fica com apenas a altura do texto, e a imagem começa a influenciar a posição das outras imagens que entrem em contacto com outra que tenha o mesmo atributo float.

Alguém me pode ajudar na parte de continuar a ter a imagem com float, mas ao mesmo tempo que a div aumente a sua posição com os objectos do tipo float?

Este problema também me aparece quando uma DIV float esta dentro de uma DIV sem float

Share this post


Link to post
Share on other sites
charly

Obrigado HappyHippyHippo e yoda , já a quase 1 ano que tenho este problema,

pelo menos já esta a funcionar, e para aqueles que tiverem a mesma dúvida, é muito facil, na div que irá contem objectos que tenham propriedades float, deverão ter as propriedades clear: both e display: inline-block

basicamente:

<div style="clear:both; display: inline-block;">
  <div style="float: left;">Texto</div>
</div>

LOL aquela parte da temperatura, foi porque na altura estava a pensar na temperatura do meu pc, que tem a grafica a chegar aos 108ºC

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.