4 façons d'obtenir une distribution égale avec CSS-tutoriel CSS-php.cn

Cet article présente principalement en détail 4 façons d'obtenir une distribution égale en CSS. La distribution égale fait référence à une méthode de mise en page dans laquelle les éléments enfants répartissent uniformément la largeur des éléments parents. Cet article présentera 4 façons d'obtenir une distribution égale. peut faire référence à

La distribution égale fait référence à une méthode de mise en page dans laquelle les éléments enfants répartissent uniformément la largeur des éléments parents. Cet article présentera 4 façons d'obtenir une distribution égale

Idée 1 : float

Inconvénients : il existe un couplage entre la structure et le style, et il y a une erreur d'arrondi dans la valeur du pourcentage de largeur sous le navigateur IE7

【 1】 float + padding + background-clip

Utilisez padding pour obtenir l'espacement entre les sous-éléments et utilisez background-clip pour que le remplissage fasse partie du sous-élément. l'élément n'affiche pas l'arrière-plan

Code CSSCopier le contenu dans le presse-papiers

Code XML/HTMLCopier le contenu dans le presse-papiers
<
class
=
>

p class=

"parent"

style
="couleur de fond : gris clair;" > p class="enfant"
style
="couleur de fond : bleu clair;"> ;1p> 🎜>p classe="enfant" style
=
> p>
3p>
4p> >
p>
p>

【2】float + margin + calcUtilisez la marge pour obtenir l'espacement entre les sous-éléments, utilisez la fonction calc() calcule le largeur de l'élément enfant

Copier le contenu dans le presse-papiers

Code XML/HTML复制内容到剪贴板

1< ;/p>
p>
;2p>
p>
3p>
p>
4p>
p>
p >

思路二 : bloc en ligne

Inconvénients : vous devez définir l'alignement vertical vertical-align, et vous devez gérer le problème d'espacement des caractères de nouvelle ligne analysés en espaces. IE7-Le navigateur ne prend pas en charge la définition de l'attribut inline-block pour les éléments de niveau bloc. Le code compatible est display:inline;zoom:1;

【1】inline-block +. rembourrage + arrière-plan - clip

Code CSSCopier le contenu dans le presse-papiers

>
Code XML/HTML
Copier le contenu dans le presse-papiers
<
p
class
=
"parent"
style
=
" couleur de fond : gris clair ;
p
>

<p classe

style="couleur de fond : vert clair; ">2p>
3

4p> 🎜>
p>
p>

【2】en ligne- bloc + marge + calc

Code CSSCopier le contenu dans le presse-papiers

Code XML/HTML复制内容到剪贴板

;
1p>
p>
2p >
p>
3p>
p>
4p>
p>
p>
p>

思路三: table

缺点：元素被设置为table后，内容撑开宽度。若要兼容IE7-浏览器，需要改为

【1】table + margin负值

Code CSS复制内容到剪贴板

Code XML/HTML复制内容到剪贴板

;
1p>
p>
2 p>
p>
3p>
p>
4p >
p>
p>
p>

【2】table + 兄弟选择器

Code CSS复制内容到剪贴板

Code XML/HTML复制内容到剪贴板

1p>
p>
2p >
p>
3p>
p>
4p>
p>
p>

思路四 : flex

Code CSS复制内容到剪贴板

Code XML/HTML复制内容到剪贴板

1p>
2p>
3p>
4 p>
p>

以上就是本文的全部内容，希望对大家的学习有所帮助。

本文链接：http://www.cnblogs.com/xiaohuochai/p/5456695.html

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!

Étiquettes associées：

css 方式

source：php.cn

Article précédent：Tutoriel CSS3 : background-clip et background-origin Article suivant：Explication complète des attributs de mise en page Android Layout

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Derniers articles par auteur