Flottant une div sans spécifier de largeur

Je peux faire flotter une image sur la gauche et faire envelopper le texte sans problème simplement en spécifiant float: left sur l'image. Comme ceci:Flottant une div sans spécifier de largeur

<div id='foo'> 

    <img src='bar' alt='baz' style='float: left;' /> 
    Lorem ipsum... 

</div>

Toutefois, si l'image est enveloppé dans un div comme i suivant ne peut pas obtenir le même effet sans déclarer une largeur fixe sur les deux div#image_container et la div#text_container

<div id='image_container'> 
    <img src='blah' alt='blah' /> 
</div> 

<div id='text_container'> 
    Lorem ipsum... long text 
</div>

Y at-il un façon de garder la flexibilité de la première solution et éviter de déclarer une largeur et avoir le flotteur div#image_container à côté de la div#text_container?

Source

2010-01-12 Lorenzo

Voir cette question: http://stackoverflow.com/questions/2042645/setting-widthauto-leads-to-width100 – Boldewyn

@Boldewyn i appliqué display: inline -bloc à la div wrapper de mes #text_container et #image_container mais cela ne fonctionne que si la largeur du texte est plus courte que la largeur restante. Devrais-je vraiment calculer la largeur avec js? – Lorenzo

#text_container, 
#image_container { 
    display: inline; 
}

devrait le faire. Essayez ceci:

<html> 
    <head> 
    <style> 
     #top { 
      float: left; 
      display: inline; 
      border: 1px solid green; 
     } 

     #bottom { 
      float: right; 
      display: inline; 
      border: 1px solid red; 
     } 
    </style> 
    </head> 
    <body> 
    <div id="top"> 
     I'm the top div 
    </div> 
    <div id="bottom"> 
     I'm the bottom div 
    </div> 
</html>

Mais si le contenu de vos div est de plus grand que la largeur que vous avez quitté pour eux (ce qui est probablement) alors vous luttez. Vous devriez vraiment lui donner une largeur, mais ce qui précède pourrait fonctionner pour vous selon la façon dont vous voulez l'utiliser.

Source

2010-01-12 13:46:44

Merci, cela fonctionne si le texte est plus court que la largeur (ce qui n'est pas dans mon cas) :( – Lorenzo

Au lieu du conteneur de texte, utilisez une balise de paragraphe (<p></p>). Il s'enroulera autour du contenu et sera plus accessible et sémantique.

Source

2010-01-12 15:34:24

Si vous voulez envelopper une image, comment est-ce sémantique? – JoseMarmolejos

J'aime emballer le code dans les balises html natives Je limite les divs au codage au niveau du template, c'est pourquoi j'utiliserais une balise paragraph –

Essayez de définir overflow: hidden sur la div wrapper, qui doit définir automatiquement div sur la largeur de l'image.

OK, j'ai peut-être mal compris votre question. Voulez-vous que le texte circule autour de l'image? Si oui, tout ce que vous avez besoin est ce CSS:

#text_container { display: inline; }

Source

2010-01-12 15:35:47 DisgruntledGoat

Like Colt .45 ... Fonctionne toujours à chaque fois – tahdhaze09

Je dois toujours définir la largeur sur le text_container – Lorenzo

Flottant une div sans spécifier de largeur

Répondre

Questions connexes