Prévention de l'encapsulation flottante sans définition de la largeur parent

Je souhaite que plusieurs éléments soient empilés horizontalement à l'infini (sur une ligne), sans définir la largeur de leur conteneur parent. Je suis pleinement conscient que la définition du conteneur div à la largeur: 1000px; va les empiler, mais pour diverses raisons, je ne veux pas utiliser cette solution. Y a-t-il des alternatives?Prévention de l'encapsulation flottante sans définition de la largeur parent

<html> 
<head> 
<style type="text/css"> 
div {white-space:nowrap; clear:none;} 
div div {width:300px; border:1px solid black; float:left; display:inline;} 
</style> 
</head> 
<body> 
<div> 
    <div>x</div> 
    <div>x</div> 
    <div>x</div> 
    <div>x</div> 
    <div>x</div> 
    <div>x</div> 
</div> 
</body> 
</html>

Source

2010-05-19 Matrym

Vous n'avez pas besoin de '' float' ces div's dans l'exemple que vous avez donné pour réaliser l'empilement. Si vous voulez vraiment «flotter» alors, vous pouvez essayer d'appliquer 'clear: left' à chaque' div'. – ground5hark

Ce n'est pas nécessairement une solution robuste, mais si vous pouvez obtenir exactement 300px de contenu dans chacune des divs internes, vous pouvez retirer le flotteur et les propriétés largeur. Peut-être inclure une image transparente 1x300, et assurez-vous que vous n'avez pas trop de texte? Peut-être

div.dummycontent {float:left; width:200px; background-color:Blue; } 
<div class="dummycontent">&nbsp;</div>

Ou si les raisons de ne pas fixer une largeur sont principalement le long des lignes de ne pas savoir que l'exécution que soit la taille devra être, peut-être calculer avec JavaScript, et le mettre alors?

Source

2010-05-19 16:06:16 joelt

display: inline; 
    white-space: nowrap; 
    float: none;

et sur un élément parent, vous aurez besoin

overflow:hidden;

Source

2012-11-15 01:05:06 deweydb

Prévention de l'encapsulation flottante sans définition de la largeur parent

Répondre

Questions connexes