Comment faire <div> inline? Tous les <div>, même lorsque leur largeur totale de plus que la largeur de leur parent?
J'ai besoin de faire <div>
affiché en ligne et de les cacher avec "overflow: hidden" pour leur parent.
Largeur pour <div>
est fixé à 20% avec les "box-sizing" de la propriété, de sorte qu'ils sont exactement 20% de leur parent largeur.
La méthode habituelle, à l'aide de "float: left" n'aide pas, car il ne fait que 5 <div>
affiché dans une ligne, et le reste de leur illustré dans la nouvelle ligne de sous les 5 premières <div>
.
Comment faire tous les <div>
displayd en ligne et cacher le reste d'entre eux s'ils sont trop larges pour être montré à l'intérieur de leur parent, à l'aide de "overflow: hidden"?
J'ai le document suivant de la structure:
<body>
<div class="column">
<div class="header">Some text</div>
<ul class="item_list">
<li class="simple"><a href="">Some text<br></a></li>
<li class="simple"><a href="">Some text<br></a></li>
<li class="simple"><a href="">Some text<br></a></li>
...
</ul>
</div>
Vous pouvez voir ce que je veux dire ici. Mais je l'ai fait à l'aide de javascript (sertie d' <div>
"position: absolute" et les produits "margin-left" pour chaque elemet) et il cause beaucoup de problèmes pour le développement futur.
display:inline
et clear:none
?Bien sûr, mais j'ai besoin de largeur fixe des éléments (20%) et la largeur des éléments en ligne dépend de leur contenu.
OriginalL'auteur Feniks502 | 2011-01-23
Vous devez vous connecter pour publier un commentaire.
DÉMO: http://jsfiddle.net/marcuswhybrow/7YDfE/3/
Utilisation
display: inline-block
etwhite-space: nowrap
en combinaison:Puis utiliser le CSS:
La démo contient un peu de jQuery animation pour illustrer l'effet:
DÉMO: http://jsfiddle.net/marcuswhybrow/7YDfE/3/
display: inline-block
n'est pas prise en charge pour non "naturellement inline' éléments dans IE 6, et de manière incomplète dans IE 7.Dans mes tests,
display: inline
ne fournit pas l'effet escompté sur les divs: jsfiddle.net/marcuswhybrow/emBjM/1Merci!
inline-block
etnowrap
fonctionne très bien, mais comment supprimer apparu des espaces entre les éléments? Le seul moyen que j'ai trouvé est de wride code en une seule ligne: jsfiddle.net/2QZeB/1C'est un facteur d'espaces dans le balisage, la solution est de supprimer tous les espaces entre les éléments: jsfiddle.net/marcuswhybrow/7YDfE/5
Vous avez m'a beaucoup aidé, merci!
OriginalL'auteur Marcus Whybrow
Si le
div
éléments sontdisplay: inline
puis en appliquantwhite-space: nowrap;
à l'élément parent permettra d'éviter leur emballage de nouvelles lignes.OriginalL'auteur David Thomas
Puisque vous avez un nombre connu de vrd, avez-vous essayé d'utiliser le positionnement absolu à la place de flotteurs, et de spécifier left:20% gauche:40%, etc.?
OriginalL'auteur Jason LeBrun
Si vous définissez le conteneur
div
hauteur à une valeur fixe, et de donner tous les éléments intérieursdisplay: inline-block
, cela devrait faire l'affaire.inline-block
fera de chaque élément d'aligner à gauche, mais garder ses dimensions, tandis que la hauteur fixe conteneur cacher tout que le trop-plein d'une nouvelle ligne.OriginalL'auteur Bojangles
Cela va faire ce que vous voulez avec l'ajout de la suppression de l'espace blanc entre les, tout en permettant à nice de formatage de code. Le conteneur obtient font-size:0px ftw.
Balisage
CSS
OriginalL'auteur Joe Johnston