Lassen Sie uns über einige interessante CSS-Probleme sprechen (6) – vollständig kompatible mehrspaltige einheitliche Layoutprobleme

Dies ist die erste Reihe, in der einige interessante CSS-Themen besprochen werden. Abgesehen von der praktischen Anwendbarkeit sollen einige Themen die Ideen zur Lösung von Problemen erweitern. Darüber hinaus beinhalten sie einige CSS-Details, die leicht übersehen werden.

Kompatibilität wird bei der Lösung von Problemen nicht berücksichtigt. Sagen Sie einfach, was Ihnen bei der Problemlösung nicht vertraut ist schnell.

Aktualisieren Sie weiter, aktualisieren Sie weiter, aktualisieren Sie weiter, sagen Sie wichtige Dinge dreimal.

Sprechen Sie über einige interessante CSS-Themen (1) – So implementieren Sie die linke vertikale Leiste

Sprechen Sie über einige interessante CSS-Themen (2) – Sprechen Sie über das Box-Modell aus der Implementierung gestreifter Ränder

Sprechen Sie über einige interessante CSS-Themen (3) – Wie viel wissen Sie über Stapelreihenfolge und Stapelkontext

Sprechen Sie über einige interessante CSS-Themen (4) – beginnen Sie mit der Reflexion und sprechen Sie über CSS-Vererbung

Sprechen Sie über einige interessante CSS-Themen (5) – zentrieren Sie eine einzelne Zeile, zentrieren Sie zwei Zeilen und lassen Sie mehr als zwei Zeilen weg

Alle Themen sind in meinem Github zusammengefasst.

6. Vollständig kompatibles mehrspaltiges einheitliches Layoutproblem

So erreichen Sie das folgende mehrspaltige einheitliche Layout (die geraden Linien im Bild sind nicht enthalten, um die Breite des Containers anzuzeigen):

Methode 1: display:flex

CSS3 Flexible Box (Flexible Box oder Flexbox) ist eine Layoutmethode, die dennoch sicherstellen kann, dass Elemente ein angemesseneres Anordnungsverhalten aufweisen, wenn die Seite an verschiedene Bildschirmgrößen und Gerätetypen angepasst werden muss.

Flex-Layout eignet sich natürlich gut für mobile Anwendungen. Wenn der PC vollständig kompatibel sein muss, reicht die Kompatibilität nicht aus, daher überspringen wir es hier.

Methode 2: Verwenden Sie Pseudoelemente und text-align:Lassen Sie uns über einige interessante CSS-Probleme sprechen (6) – vollständig kompatible mehrspaltige einheitliche Layoutprobleme

ist wie folgt definiert HTML Stil:

<div class="container">
    <div class="Lassen Sie uns über einige interessante CSS-Probleme sprechen (6) – vollständig kompatible mehrspaltige einheitliche Layoutprobleme">
        <i>1</i>
        <i>2</i>
        <i>3</i>
        <i>4</i>
        <i>5</i>
    </div>
</div>

Wir wissen, dass es text-align:Lassen Sie uns über einige interessante CSS-Probleme sprechen (6) – vollständig kompatible mehrspaltige einheitliche Layoutprobleme gibt, mit dem der Effekt erzielt werden kann, dass Text an beiden Enden ausgerichtet wird.

text-align CSS-Eigenschaften definieren, wie Inline-Inhalte (z. B. Text) relativ zu seinem übergeordneten Blockelement ausgerichtet werden. text-align steuert nicht die Ausrichtung des Blockelements selbst, sondern nur die Ausrichtung seines Inline-Inhalts.

text-align:Lassen Sie uns über einige interessante CSS-Probleme sprechen (6) – vollständig kompatible mehrspaltige einheitliche Layoutprobleme bedeutet, dass der Text beidseitig ausgerichtet ist.

Zuerst vermutete ich, dass dies mit dem folgenden CSS erreicht werden könnte:

.Lassen Sie uns über einige interessante CSS-Probleme sprechen (6) – vollständig kompatible mehrspaltige einheitliche Layoutprobleme{
  text-align: Lassen Sie uns über einige interessante CSS-Probleme sprechen (6) – vollständig kompatible mehrspaltige einheitliche Layoutprobleme;
}

.Lassen Sie uns über einige interessante CSS-Probleme sprechen (6) – vollständig kompatible mehrspaltige einheitliche Layoutprobleme i{
  width:24px;
  line-height:24px;
  display:inline-block;
  text-align:center;
  border-radius:50%;
}

结果如下：

 

Demo戳我

没有得到意料之中的结果，并没有实现所谓的两端对齐，查找原因，在 W3C 找到这样一段解释:

最后一个水平对齐属性是 Lassen Sie uns über einige interessante CSS-Probleme sprechen (6) – vollständig kompatible mehrspaltige einheitliche Layoutprobleme，它会带来自己的一些问题。CSS 中没有说明如何处理连字符，因为不同的语言有不同的连字符规则。规范没有尝试去调和这样一些很可能不完备的规则，而是干脆不提这个问题。

额，我看完上面一大段解释还是没明白上面意思，再继续查证，才找到原因：

虽然 text-align:Lassen Sie uns über einige interessante CSS-Probleme sprechen (6) – vollständig kompatible mehrspaltige einheitliche Layoutprobleme 属性是全兼容的，但是要使用它实现两端对齐，需要注意在模块之间添加[空格/换行符/制表符]才能起作用。

也就是说每一个 1 间隙，至少需要有一个空格或者换行或者制表符才行。

好的，我们尝试一下更新一下 HTML 结构，采用同样的 CSS：

<div class="container">
    <div class="Lassen Sie uns über einige interessante CSS-Probleme sprechen (6) – vollständig kompatible mehrspaltige einheitliche Layoutprobleme">
        <i>1</i>

        <i>2</i>

        <i>3</i>

        <i>4</i>

        <i>5</i>

    </div>
</div>

尝试给每一块中间添加一个换行符，结果如下：

Demo戳我

啊哦，还是不行啊。

再寻找原因，原来是出在最后一个元素上面，然后我找到了 text-align-last 这个属性，text-align-last属性规定如何对齐文本的最后一行，并且 text-align-last 属性只有在 text-align 属性设置为 Lassen Sie uns über einige interessante CSS-Probleme sprechen (6) – vollständig kompatible mehrspaltige einheitliche Layoutprobleme 时才起作用。

尝试给容器添加 text-align-last:Lassen Sie uns über einige interessante CSS-Probleme sprechen (6) – vollständig kompatible mehrspaltige einheitliche Layoutprobleme：

.Lassen Sie uns über einige interessante CSS-Probleme sprechen (6) – vollständig kompatible mehrspaltige einheitliche Layoutprobleme{
  text-align: Lassen Sie uns über einige interessante CSS-Probleme sprechen (6) – vollständig kompatible mehrspaltige einheitliche Layoutprobleme;
  text-align-last: Lassen Sie uns über einige interessante CSS-Probleme sprechen (6) – vollständig kompatible mehrspaltige einheitliche Layoutprobleme; // 新增这一行
}

.Lassen Sie uns über einige interessante CSS-Probleme sprechen (6) – vollständig kompatible mehrspaltige einheitliche Layoutprobleme i{
  width:24px;
  line-height:24px;
  display:inline-block;
  text-align:center;
  border-radius:50%;
}

发现终于可以了，实现了Lassen Sie uns über einige interessante CSS-Probleme sprechen (6) – vollständig kompatible mehrspaltige einheitliche Layoutprobleme：

Demo戳我

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

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

上面说了要使用 text-align:Lassen Sie uns über einige interessante CSS-Probleme sprechen (6) – vollständig kompatible mehrspaltige einheitliche Layoutprobleme 实现多列布局，要配合 text-align-last ，但是它的兼容性又不好，真的没办法了么，其实还是有的，使用伪元素配合，不需要 text-align-last 属性。

我们给 class="Lassen Sie uns über einige interessante CSS-Probleme sprechen (6) – vollständig kompatible mehrspaltige einheitliche Layoutprobleme" 的 div 添加一个伪元素：

.Lassen Sie uns über einige interessante CSS-Probleme sprechen (6) – vollständig kompatible mehrspaltige einheitliche Layoutprobleme{
  text-align: Lassen Sie uns über einige interessante CSS-Probleme sprechen (6) – vollständig kompatible mehrspaltige einheitliche Layoutprobleme;
}

.Lassen Sie uns über einige interessante CSS-Probleme sprechen (6) – vollständig kompatible mehrspaltige einheitliche Layoutprobleme i{
  width:24px;
  line-height:24px;
  display:inline-block;
  text-align:center;
  border-radius:50%;
}

.Lassen Sie uns über einige interessante CSS-Probleme sprechen (6) – vollständig kompatible mehrspaltige einheitliche Layoutprobleme:after {
  content: "";
  display: inline-block;
  position: relative;
  width: 100%;
}

Entfernt text-align-last: Lassen Sie uns über einige interessante CSS-Probleme sprechen (6) – vollständig kompatible mehrspaltige einheitliche Layoutprobleme und ein Pseudoelement hinzugefügt, der Effekt ist wie folgt:

Demo stupsen mich an, beliebig viele Spalten sind gleichmäßig angeordnet

Durch Festlegen der :after-Breite des Pseudoelements inline-block 100% und Anpassen an die text-align: Lassen Sie uns über einige interessante CSS-Probleme sprechen (6) – vollständig kompatible mehrspaltige einheitliche Layoutprobleme des Containers können Sie problemlos ein einheitliches Layout mehrerer Spalten erreichen. Mit ein paar weiteren Hackcodes kann es mit IE6 kompatibel sein. Das Wichtigste ist, dass der Code nicht lang und leicht zu verstehen ist.

Die endgültige Erkenntnis des Problems ist wie in der Anfangsphase gezeigt:

Demo stupsen mich an, beliebig viele Spalten sind gleichmäßig angeordnet

Diese Methode wurde erstmals in diesem Artikel gesehen. Sie wurde mit Zustimmung des ursprünglichen Bloggers geschrieben. Es ist sehr lesenswert:

• Denken Sie nicht zu viel, es geht nur darum, beide Enden in Einklang zu bringen

Alle Themen sind in meinem Github zusammengefasst und im Blog gepostet in der Hoffnung auf mehr Austausch.

Dies ist das Ende dieses Artikels, wenn Sie noch Fragen oder Anregungen haben. Es handelt sich um einen originellen Artikel und das Wissen ist oberflächlich im Artikel, lassen Sie es mich bitte wissen.