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

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) :

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>

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%;
}

Les résultats sont les suivants :

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>

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

啊哦，还是不行啊。

再寻找原因，原来是出在最后一个元素上面，然后我找到了 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%;
}

发现终于可以了，实现了多列均匀布局：

结束了？没有，查看一下 text-align-last 的兼容性：

但是一看兼容性，惨不忍睹，只有 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%;
}

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

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

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

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

最终实现题目初始所示：

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!