CSS des éléments de bloc sur une ligne

Ce qui est la façon la plus commune pour faire face à une série de bloquer les éléments qui doivent être sur une ligne (si le javascript doit être en mesure de modifier leurs largeurs, par exemple)? Quels sont les avantages et les inconvénients de l'application float:left à chacun d'eux un rapport de positionnement pour les placer?

OriginalL'auteur Dan Monego | 2008-11-21

4

Flottant serait mon choix, mais cela dépend vraiment de ce que vous souhaitez obtenir. Si vous pouvez fournir un exemple plus spécifique, je serais en mesure de vous donner une bonne raison pour quoi et pourquoi je pense que vous devriez utiliser. Cependant voici une brève liste des avantages et des inconvénients que j'ai trouvé (je suis en supposant que le positionnement de vous dire le positionnement absolu):

De positionnement pour:
- le positionnement très précis par rapport à la prochaine ancêtre marquée comme la position relative - permet une grande flexibilité
- permet d'éléments à être dans un ordre différent visuellement que dans les DOM
Positionnement contre:
- Plus difficile pour s'aligner avec les autres éléments de l'positionné élément n'est plus dans le flux de documents et aussi parce que le niveau de précision requis.
- Autres éléments ignorer la position absolue de l'élément qui signifie que vous pourriez avoir un risque de double emploi, à moins que vous de tenir compte de la taille minimale et maximale de l'élément positionné
- plus difficile à mettre en œuvre un pied de page si vous utilisez un positionnement absolu pour vos colonnes.
Flotteur pour:
- vraiment facile de construire des mises en page
- pas de problème de pied de page
- pas de se soucier de la précision, le navigateur prend en charge pour vous
- conteneur parent s'étend
Flotteur contre:
- Beaucoup de pièges pour ceux qui sont moins expérimentés avec flotteur mises en page qui peut conduire à de nombreuses questions posées sur 🙂
Comme pour le clear:both élément que Sebastian mentionné, Il y a un moyen simple de contourner cela. Disons que vous avez un div conteneur et 2 divs flottants à l'intérieur.

Html:
```
<div id="con">
    <div class="float"></div>
    <div class="float"></div>
</div>
```
CSS:
```
#con { background:#f0f; }
.float { float:left; width:100px; height:100px; background:#0ff; }
```
si vous exécutez ce code, vous remarquerez que le div conteneur (le rose magenta) est d'un seul pixel de haut, tandis que les divs flottants ont été correcte - ce qui est le problème Sebastian mentionné. Vous pouvez maintenant suivre son conseil et ajouter un br ou flotter le récipient qui ne serait pas très sémantique - donc, ici, est un peu plus élégant. Juste ajouter overflow:hidden; pour le conteneur div comme ceci:
```
#con { background:#f0f; overflow:hidden; }
```
Maintenant votre conteneur doit envelopper les divs flottants correctement.

OriginalL'auteur Darko Z
9

Bien, si vous n'êtes pas trop préoccupé par les anciens navigateurs (je suis à la recherche à vous, IE6) la meilleure façon d'aller avec
```
display:inline-block;
```
Fondamentalement, il crée une boîte-modèle de l'élément sans compensation avant ou après lui, de sorte qu'il reste dans la ligne. Chaque navigateur interprète bien.

essayez avec firefox.. il a aussi des problèmes avec cette propriété.. si je ne suis pas d'erreur, il y a un -moz-inline-block ou quelque chose..
Juste aujourd'hui, j'ai fait quelques trucs de l'utiliser (FF3) et n'avait aucun problème que ce soit, il regarda même dans FF, Opera, Chrome et IE7
Mauvaise idée, il existe des moyens simples à mettre en œuvre ce dont il parle, sans l'aide de croquis des éléments qui ne sont pas pris en charge dans la plupart des navigateurs (IE6 est encore l'une des principales navigateur, malgré la façon dont nous nous sentons tous à ce sujet)
IE6 peut supoort correctement avec des adaptations mineures (quirksmode.org/css/display.html), mais comme beaucoup de choses dans le webdesign, le chemin choisi pour résoudre un problème est directement lié au public du site. C'est pourquoi j'ai dit qu'il pouvait l'utiliser si les anciens navigateurs ne le regardaient pas.

OriginalL'auteur Gabe
1

Le conteneur parent ne s'allonge pas avec eux, sauf si il est également attribué à un flotteur de balise ou il y a un br avec clear:both; en bas.

J'irais avec le float:left, au lieu de le positionnement. Le navigateur n'tous les alignant quand un objet s'étend. Donc il y a moins de vous intéresser.

OriginalL'auteur Sebastian Hoitz
1

Je pense que je n'aurais pas explicitement position les éléments, mais plutôt d'indiquer au navigateur d'utiliser une ligne de mise en page pour les éléments à l'aide de display:inline et laisser le navigateur gérer le positionnement.

concernant float vs positionnement, je pense que la seule façon de les mettre en ligne à l'aide de positionnement est d'utiliser le positionnement absolu, et cela signifie que vous avez besoin pour gérer re-tailles(de la vue navigateur de port) afin de maintenir les éléments en place.

Je pense que par l'aide de la flotte de la propriété le navigateur gère le re-dimensionnement des problèmes pour vous et re-rend l'élément au bon endroit.

Le problème avec display:inline est il s'oppose à une multitude d'options pour les scripts, y compris de façon dynamique le redimensionnement de la largeur.

OriginalL'auteur rhinof
0

Seul inconvénient de flotter dans des situations de ce genre pour moi a été que vous devrez justifier à gauche ou à droite les justifier -- le centrage n'est pas une option. Cependant, vous avez mentionné que vous êtes en utilisant des valeurs absolues pour les largeurs, vous pouvez donc le nid de tous les flottait éléments dans un élément DIV et ajouter la marge de droite ou de marge de gauche de la DIV parent pour simuler alignement au centre.

OriginalL'auteur Andrew G. Johnson

Vous devez vous connecter pour publier un commentaire.