Six façons de disposer les éléments horizontalement

Comme nous le savons tous, les éléments au niveau du bloc sont disposés verticalement par défaut et les éléments en ligne sont disposés horizontalement. Les éléments au niveau du bloc sont essentiellement utilisés dans la mise en page, comme div et d'autres balises courantes au niveau du bloc. Les éléments à plusieurs niveaux doivent-ils également être disposés horizontalement ? Cet article vous présentera six façons de réaliser une disposition horizontale des éléments au niveau des blocs.

Le premier type : display: inline-block

Tout d'abord, vous devez comprendre les éléments de bloc et les éléments en ligne

Block- Éléments de niveau : les éléments de niveau bloc incluent la largeur, la hauteur, le remplissage, la bordure et la marge. Ils sont disposés de haut en bas. Les éléments courants au niveau du bloc incluent div, p, form, ul, etc.

Éléments en ligne : la hauteur et la largeur sont déterminées par le contenu. Ils ne peuvent pas définir une taille fixe. Il n'y a pas de marge verticale et de remplissage. La disposition est horizontale pour la majorité de tous les éléments HTML. Par exemple, a, span, label, button, img, input...

Certaines personnes peuvent avoir des questions ici : "Les étiquettes Button, img et input peuvent définir la largeur et la hauteur, ainsi que la marge et le remplissage. " , pourquoi s'agit-il vraiment d'un élément en ligne ? " En fait, il existe deux manières principales de diviser les éléments HTML, à savoir "les éléments au niveau du bloc et les éléments en ligne" et les "éléments remplaçables et les éléments non remplaçables". La méthode de première division est présentée ci-dessus et la méthode de deuxième division est présentée ci-dessous :

Élément de remplacement : la compréhension populaire est un élément avec des attributs de largeur et de hauteur. L'élément de remplacement est similaire à l'élément display:inline-block. Vous pouvez définir la hauteur, la largeur et les marges intérieures et extérieures. Il comprend principalement img, input, textarea, select, object, audio et canvas. est un élément de remplacement.

Éléments non remplaçables : à l'exception des éléments de remplacement, le reste sont des éléments non remplaçables (O(∩_∩)O)

Après beaucoup de bêtises, nous savons que display: inline -block peut laisser les éléments être disposés horizontalement, mais il peut y avoir un petit problème avec cette disposition :

<style>
        div{
            display:inline-block;    width:200px;    height:200px;
        }
        .div1{
            background:green;
        }
        .div2{
            background:red;
        }
</style>
<div class = "div1">左边</div>
<div class = "div2">右边</div>

C'est là que nous avons trouvé un écart entre les deux divs. Pourquoi ?

Le navigateur traitera les nouvelles lignes, les retraits et les espaces comme un seul espace. Même s'il y a deux espaces, ou une nouvelle ligne plus un espace, etc., ils seront analysés en un seul espace. La taille de cet espace est font-size/2. Il existe de nombreuses façons de combler cet écart.

1. Définissez la marge gauche de div2:-font-size/2

2 Définissez la taille de police des balises parentes des deux divs : 0

3. Définir un espacement négatif des mots

Le deuxième type : float : gauche/droite

L'attribut float peut éloigner l'élément du flux de document régulier, le long du côté gauche du récipient ou disposer horizontalement sur la droite.

Cette méthode peut être considérée comme la plus utilisée, mais il y a un problème. Dans la mise en page adaptative, la hauteur et la largeur des éléments ne sont généralement pas fixes, et seront automatiquement ajustées en fonction de la taille du contenu. c'est si les éléments enfants sont tous S'il s'agit d'un élément flottant, il y aura un degré élevé d'effondrement.

À titre d'exemple

<style>
        span{
            float:left;        width:200px;    height:200px;
        }
        .box1{
            background:green;
        }
        .box2{
            background:red;
        }
</style>
<div>
    <span class = "box1">左边</span>
    <span class = "box2">右边</span>
</div>

Ici, le sous-élément div dans le châtaignier précédent est délibérément modifié en span. En fait, je veux exprimer que float peut implicitement convertir des éléments en bloc. éléments (position : absolue/fixe sont également disponibles), de sorte que la largeur et la hauteur peuvent être définies naturellement.

Alors, quel est le problème une fois les cartons disposés horizontalement ? C'est exact! La hauteur du conteneur parent s'effondre. À ce stade, la hauteur du conteneur parent div est 0, car l'élément flottant se détachera du flux de documents régulier et son conteneur parent l'ignorera lors du calcul de la hauteur. C'est quelque chose que nous ne voulons pas voir, car s'il y a d'autres balises de flux régulières derrière ce DIV fortement réduit, la page sera gâchée et d'autres résultats indésirables se produiront.

La solution est naturellement d'effacer les flottants. Il existe deux manières principales d'effacer les flottants :

1.clear:left/right/both, qui est spécialement utilisé pour effacer le CSS flottant.

2.BFC, car BFC a une règle "Lors du calcul de la hauteur de BFC, les éléments flottants participent également au calcul."

Parlons de plusieurs méthodes pour effacer les flottants avec clear :

1 Ajoutez une balise vide après le dernier élément enfant, puis définissez son style clear:both.

2. Dans le dernier élément enfant flottant, utilisez le pseudo element::after pour ajouter un style clair pour effacer le flottant

La troisième méthode : disposition du tableau

Cette méthode de mise en page n'est en fait pas couramment utilisée car elle pose divers problèmes.

La vitesse de rendu est lente

Augmente la quantité de code HTML et est difficile à maintenir

Le nom de la balise n'est pas conforme à la sémantique du tableau HTML. utilisé à l'origine pour les tableaux, et il n'est même pas utilisé pour la mise en page. C'est inapproprié

La structure des balises est relativement rigide et le coût des modifications ultérieures est plus élevé

etc. trop ici. Bref, essayez d'utiliser la disposition des tableaux

La quatrième méthode : le positionnement absolu

Cette méthode est également davantage utilisée dans le développement quotidien Comme mentionné précédemment, float peut créer des éléments. détacher. Pour un flux de documents régulier, position:absolute/fixed ici a également le même effet. La méthode de traitement a été mentionnée dans la disposition flottante, vous pouvez donc simplement la déplacer ici.

Ici, je veux parler du positionnement absolu position:absolute. Le positionnement est basé sur son premier parent et est un élément positionné statiquement tel que position:absolute/relative/fixed. S'il est introuvable, utilisez la racine. L'élément est utilisé comme base pour le positionnement. Généralement, l'élément parent position:ralative est utilisé en combinaison avec l'élément enfant position:absolute.

Le cinquième type : mise en page flexible CSS3

弹性布局因为其兼容性所以还没有得到广泛的认可，不过我觉得以后它肯定会独占鳌头，就跟我看好html的视频播放器一样，早晚都会干败flash，只是时间问题！！！

第六种：transform:translate

CSS3中用于动画的一个样式，但是他可是让两个元素横向排列，这里不多说直接上代码，请用谷歌浏览器运行一下：

<style>
        div{
            width:200px;    height:200px;
        }
        .box1{
            background:green;
        }
        .box2{
            transform: translateX(200px) translateY(-200px);
            background:red;
        }
    </style>
<div>
    <div class = "box1">左边</div>
    <div class = "box2">右边</div>
</div>

效果和前几种方式一样。

以上就是我说分享实现横向布局的六种方式，其实每种方式都有很多大学问，我解释描述了冰山一角，并且没有过多的考虑浏览器的兼容性，不过还是希望对你有所帮助。

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!