Maison > interface Web > tutoriel CSS > le corps du texte

Solution entièrement compatible CSS au problème de mise en page uniforme multi-colonnes

高洛峰
Libérer: 2017-03-24 10:42:30
original
1494 Les gens l'ont consulté

La compatibilité n'est pas prise en compte lors de la résolution de problèmes. Les questions sont sauvages et sans contrainte. Dites simplement ce qui vous vient à l'esprit. S'il y a des propriétés CSS qui ne vous semblent pas familières dans la résolution de problèmes, allez les étudier rapidement. .

Continuez à mettre à jour, continuez à mettre à jour, continuez à mettre à jour, dites des choses importantes trois fois.

6. Problème de disposition uniforme multi-colonnes entièrement compatible

Comment obtenir la disposition uniforme multi-colonnes suivante (la ligne droite dans le l'image doit montrer la largeur du conteneur, non inclus) :

Solution entièrement compatible CSS au problème de mise en page uniforme multi-colonnes

Méthode 1 : display:flex

CSS3 Flexible Box (Flexible Box ou Flexbox) est une méthode de mise en page qui peut toujours garantir que les éléments ont un comportement de disposition plus approprié lorsque la page doit s'adapter à différentes tailles d'écran et types d'appareils.

Bien sûr, la mise en page flexible est bonne pour les applications mobiles. Si le PC doit être entièrement compatible, la compatibilité n'est pas suffisante, nous l'ignorerons donc ici.

Méthode 2 : A l'aide de pseudo-éléments et text-align:justify

est défini comme suit HTML style :


<p class="container">
    <p class="justify">
        <i>1</i>
        <i>2</i>
        <i>3</i>
        <i>4</i>
        <i>5</i>
    </p>
</p>
Copier après la connexion

Nous savons qu'il existe text-align:justify qui peut obtenir l'effet d'aligner le texte aux deux extrémités.

text-align Les propriétés CSS définissent la façon dont le contenu en ligne (tel que le texte) est aligné par rapport à son élément parent de bloc. text-align ne contrôle pas l'alignement de l'élément de bloc lui-même, seulement l'alignement de son contenu en ligne.

text-align:justify signifie que le texte est aligné des deux côtés.

Au début, j'ai deviné que cela pourrait être réalisé en utilisant le CSS suivant :


.justify{
  text-align: justify;
}

.justify i{
  width:24px;
  line-height:24px;
  display:inline-block;
  text-align:center;
  border-radius:50%;
}
Copier après la connexion

Les résultats sont les suivants :

Solution entièrement compatible CSS au problème de mise en page uniforme multi-colonnes

Démo poke me

N'a pas obtenu les résultats escomptés et n'a pas atteint le soi-disant alignement aux deux extrémités. En cherchant la raison, j'ai trouvé cette explication dans le W3C :

.

Le dernier attribut d'alignement horizontal est justify, ce qui pose ses propres problèmes. Il n'y a aucune explication en CSS sur la façon de gérer les traits d'union, car différentes langues ont des règles différentes pour les traits d'union. Plutôt que de tenter de concilier des règles potentiellement incomplètes, la spécification ignore simplement le problème.

Eh bien, après avoir lu le paragraphe d'explication ci-dessus, je n'ai toujours pas compris le sens, j'ai continué à vérifier et j'ai trouvé la raison :

<. 🎜>

Bien que l'attribut soit entièrement compatible, pour l'utiliser pour réaliser l'alignement, vous devez faire attention à l'ajout de [space/newline/tab] entre les modules pour que cela fonctionne. text-align:justify

C'est-à-dire que chaque espace 1 doit avoir au moins un espace, un saut de ligne ou un caractère de tabulation.

D'accord, essayons de mettre à jour la structure , en utilisant le même CSS : HTML


<p class="container">
    <p class="justify">
        <i>1</i>

        <i>2</i>

        <i>3</i>

        <i>4</i>

        <i>5</i>

    </p>
</p>
Copier après la connexion

Essayez d'ajouter un caractère de nouvelle ligne au milieu de chaque bloc, le résultat est le suivant :

Solution entièrement compatible CSS au problème de mise en page uniforme multi-colonnes

啊哦,还是不行啊。

再寻找原因,原来是出在最后一个元素上面,然后我找到了 text-align-last 这个属性,text-align-last属性规定如何对齐文本的最后一行,并且 text-align-last 属性只有在 text-align 属性设置为 justify 时才起作用。

尝试给容器添加 text-align-last:justify


.justify{
  text-align: justify;
  text-align-last: justify; // 新增这一行
}

.justify i{
  width:24px;
  line-height:24px;
  display:inline-block;
  text-align:center;
  border-radius:50%;
}
Copier après la connexion

发现终于可以了,实现了多列均匀布局:

Solution entièrement compatible CSS au problème de mise en page uniforme multi-colonnes

结束了?没有,查看一下 text-align-last 的兼容性:

Solution entièrement compatible CSS au problème de mise en page uniforme multi-colonnes

但是一看兼容性,惨不忍睹,只有 IE8+ 和 最新的 chrome 支持 text-align-last 属性,也就是说,如果你不是在使用 IE8+ 或者 最新版的 chrome 观看本文,上面 Demo 里的打开的 codePen 例子还是没有均匀分布。

上面说了要使用 text-align:justify 实现多列布局,要配合 text-align-last ,但是它的兼容性又不好,真的没办法了么,其实还是有的,使用伪元素配合,不需要 text-align-last 属性。

我们给 class="justify"p 添加一个伪元素:


.justify{
  text-align: justify;
}

.justify i{
  width:24px;
  line-height:24px;
  display:inline-block;
  text-align:center;
  border-radius:50%;
}

.justify:after {
  content: "";
  display: inline-block;
  position: relative;
  width: 100%;
}
Copier après la connexion

去掉了 text-align-last: justify 了,增加一个伪元素,效果如下:

Solution entièrement compatible CSS au problème de mise en page uniforme multi-colonnes

通过给伪元素 :after 设置 inline-block 设置宽度 100% ,配合容器的 text-align: justify 就可以轻松实现多列均匀布局了。再多配合几句 hack 代码,可以实现兼容到 IE6+ ,最重要的是代码不长,很好理解。

那么为什么使用了 :after 伪元素之后就可以实现对齐了呢?

原因在于 justify 只有在存在第二行的情况下,第一行才两端对齐,所以在这里,我们需要制造一个假的第二行,而 :after 伪元素正好再适合不过。

最终实现题目初始所示:

Solution entièrement compatible CSS au problème de mise en page uniforme multi-colonnes

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
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal