Let’s talk about some interesting CSS issues (6) – fully compatible multi-column uniform layout issues

Start this series and discuss some interesting CSS topics. Putting aside practicality, some topics are designed to broaden the ideas for solving problems. In addition, they involve some CSS details that are easily overlooked.

Compatibility is not taken into account when solving problems. The questions are wild and wild. Just say whatever comes to mind. If there are CSS properties that you feel are unfamiliar in the problem solving, go and study them quickly.

Keep updating, keep updating, keep updating, say important things three times.

Let’s talk about some interesting CSS topics (1)--How to implement the vertical bar on the left

Let’s talk about some interesting CSS topics (2) – Talking about the box model from the implementation of striped borders

Let’s talk about some interesting CSS topics (3) – How much do you know about stacking order and stack context

Let’s talk about some interesting CSS topics (4) – starting with reflection, let’s talk about CSS inheritance inherit

Let’s talk about some interesting CSS topics (5)--center a single line, center two lines, and omit more than two lines

All topics are summarized in my Github.

6. Fully compatible multi-column uniform layout problem

How to achieve the following multi-column uniform layout (the straight lines in the picture are not included to show the width of the container):

Method 1: display:flex

CSS3 Flexible Box (Flexible Box or Flexbox) is a layout method that can still ensure that elements have more appropriate arrangement behavior when the page needs to adapt to different screen sizes and device types.

Of course, flex layout is good for mobile applications. If the PC needs to be fully compatible, the compatibility is not enough, so we will skip it here.

Method 2: Use pseudo elements and text-align:Let’s talk about some interesting CSS issues (6) – fully compatible multi-column uniform layout issues

is defined as follows HTML style:

<div class="container">
    <div class="Let’s talk about some interesting CSS issues (6) – fully compatible multi-column uniform layout issues">
        <i>1</i>
        <i>2</i>
        <i>3</i>
        <i>4</i>
        <i>5</i>
    </div>
</div>

We know that there is text-align:Let’s talk about some interesting CSS issues (6) – fully compatible multi-column uniform layout issues that can achieve the effect of aligning text on both ends.

text-align The CSS property defines how inline content (such as text) is aligned relative to its block parent element. text-align does not control the alignment of the block element itself, only the alignment of its inline content.

text-align:Let’s talk about some interesting CSS issues (6) – fully compatible multi-column uniform layout issues means the text is aligned to both sides.

At first I guessed it could be achieved using the following CSS:

.Let’s talk about some interesting CSS issues (6) – fully compatible multi-column uniform layout issues{
  text-align: Let’s talk about some interesting CSS issues (6) – fully compatible multi-column uniform layout issues;
}

.Let’s talk about some interesting CSS issues (6) – fully compatible multi-column uniform layout issues i{
  width:24px;
  line-height:24px;
  display:inline-block;
  text-align:center;
  border-radius:50%;
}

结果如下：

 

Demo戳我

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

最后一个水平对齐属性是 Let’s talk about some interesting CSS issues (6) – fully compatible multi-column uniform layout issues，它会带来自己的一些问题。CSS 中没有说明如何处理连字符，因为不同的语言有不同的连字符规则。规范没有尝试去调和这样一些很可能不完备的规则，而是干脆不提这个问题。

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

虽然 text-align:Let’s talk about some interesting CSS issues (6) – fully compatible multi-column uniform layout issues 属性是全兼容的，但是要使用它实现两端对齐，需要注意在模块之间添加[空格/换行符/制表符]才能起作用。

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

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

<div class="container">
    <div class="Let’s talk about some interesting CSS issues (6) – fully compatible multi-column uniform layout issues">
        <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 属性设置为 Let’s talk about some interesting CSS issues (6) – fully compatible multi-column uniform layout issues 时才起作用。

尝试给容器添加 text-align-last:Let’s talk about some interesting CSS issues (6) – fully compatible multi-column uniform layout issues：

.Let’s talk about some interesting CSS issues (6) – fully compatible multi-column uniform layout issues{
  text-align: Let’s talk about some interesting CSS issues (6) – fully compatible multi-column uniform layout issues;
  text-align-last: Let’s talk about some interesting CSS issues (6) – fully compatible multi-column uniform layout issues; // 新增这一行
}

.Let’s talk about some interesting CSS issues (6) – fully compatible multi-column uniform layout issues i{
  width:24px;
  line-height:24px;
  display:inline-block;
  text-align:center;
  border-radius:50%;
}

发现终于可以了，实现了Let’s talk about some interesting CSS issues (6) – fully compatible multi-column uniform layout issues：

Demo戳我

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

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

上面说了要使用 text-align:Let’s talk about some interesting CSS issues (6) – fully compatible multi-column uniform layout issues 实现多列布局，要配合 text-align-last ，但是它的兼容性又不好，真的没办法了么，其实还是有的，使用伪元素配合，不需要 text-align-last 属性。

我们给 class="Let’s talk about some interesting CSS issues (6) – fully compatible multi-column uniform layout issues" 的 div 添加一个伪元素：

.Let’s talk about some interesting CSS issues (6) – fully compatible multi-column uniform layout issues{
  text-align: Let’s talk about some interesting CSS issues (6) – fully compatible multi-column uniform layout issues;
}

.Let’s talk about some interesting CSS issues (6) – fully compatible multi-column uniform layout issues i{
  width:24px;
  line-height:24px;
  display:inline-block;
  text-align:center;
  border-radius:50%;
}

.Let’s talk about some interesting CSS issues (6) – fully compatible multi-column uniform layout issues:after {
  content: "";
  display: inline-block;
  position: relative;
  width: 100%;
}

Removed text-align-last: Let’s talk about some interesting CSS issues (6) – fully compatible multi-column uniform layout issues and added a pseudo element, the effect is as follows:

Demo click me, any number of columns will be laid out evenly

By setting inline-block to the pseudo element :after and setting the width 100%, and matching the container's text-align: Let’s talk about some interesting CSS issues (6) – fully compatible multi-column uniform layout issues, you can easily achieve a uniform layout of multiple columns. With a few more hack codes, it can be compatible with IE6+. The most important thing is that the code is not long and easy to understand.

The final realization of the problem is as shown in the beginning:

Demo click me, any number of columns will be laid out evenly

This method was first seen in this article. It was written into this series with the consent of the original blogger. It is worth reading:

• Don’t think too much, it’s just that the two ends are aligned

All the topics are summarized in my Github and posted to the blog in the hope of getting more exchanges.

This is the end of this article. If you still have any questions or suggestions, you can communicate more. It is an original article. The writing style is limited and the knowledge is shallow. If there is anything wrong in the article, please let me know.