有意思的CSS题目（6）：全包容的多列均匀布局问题

2016/09/29 · CSS ·
CSS

本文小编：伯乐在线 –
chokcoco
。未经小编许可，禁止转发！
欢迎出席伯乐在线专辑撰稿人。

开本种类，研究一些妙趣横生的 CSS
题目，抛开实用性而言，一些题材为了加大一下解决问题的思路，其它，涉及部分不难忽视的
CSS 细节。

解题不考虑包容性，题目天马行空，想到什么说什么样，即使解题中有您感到到生僻的
CSS 属性，赶紧去补习一下吗。

不断更新，不断更新，不断更新，紧要的业务说四遍。

议论一些妙趣横生的CSS题目（1）：
右侧竖条的贯彻格局

议论一些诙谐的CSS题目（2）：
从条纹边框的贯彻谈盒子模型

探究一些妙不可言的CSS题目（3）：
层叠顺序与堆栈上下文知多少

探究一些诙谐的CSS题目（4）：从倒影说起，谈谈 CSS 继承
inherit

座谈一些妙不可言的CSS题目（5）：
单行居中，两行居左，超过两行省略

具备问题汇总在自我的 Github 。

开本种类，谈谈一些有意思的 CSS 题目，题目类型天马行空，想到什么说怎么，不仅为了加大一下解决问题的思路，更波及部分不难忽视的
CSS 细节。

开本序列，谈谈一些妙不可言的 CSS 题目，题目类型天马行空，想到什么说怎么，不仅为了拓宽一下缓解问题的思路，更波及部分简单忽略的
CSS 细节。

有趣的CSS题目（16）：奇妙的 background-clip: text

2017/05/04 · CSS ·
【亚洲必赢官网】全包容的多列均匀布局问题，谈谈一些妙不可言的CSS题目。background-clip

本文作者：伯乐在线 –
chokcoco
。未经小编许可，禁止转载！
欢迎参与伯乐在线专辑撰稿人。

说起 background-clip ，可能过多少人都很生疏。Clip
的意思为修剪，那么从字面意思上了然，background-clip 的趣味即是背景裁剪。

自我已经在从条纹边框的达成谈盒子模型一文中谈到了那一个特性，感兴趣的可以回头看看。

不难易行而言，background-clip 的作用就是设置元素的背景（背景图片或颜料）的填写规则。

与 box-sizing 的取值格外接近，平常而言，它有 3 个取值：

{ background-clip: border-box; // 背景延伸到边框外沿（但是在边框之下）
background-clip: padding-box; //
边框下边没有背景，即背景延伸到内边距外沿。 background-clip: content-box;
// 背景裁剪到内容区 (content-box) 外沿。 }

{

background-clip: border-box; // 背景延伸到边框外沿（但是在边框之下）

background-clip: padding-box; // 边框下面没有背景，即背景延伸到内边距外沿。

background-clip: content-box; // 背景裁剪到内容区 (content-box) 外沿。

}

唯独这几个都不是本文的骨干。本文的骨干是 background-clip: text; ，当然现在唯有chrome 援助，所以普通想使用它，必要 -webkit-background-clip:text;。

6、全包容的多列均匀布局问题

怎么贯彻下列那种多列均匀布局（图中直线为了显得容器宽度，不算在内）：

亚洲必赢官网 1

解题不考虑包容性，题目天马行空，想到如何说什么样，倘使解题中有您感觉到到生僻的
CSS 属性，赶紧去补习一下吗。

解题不考虑包容性，题目天马行空，想到什么说怎么，假若解题中有您感觉到到生僻的
CSS 属性，赶紧去补习一下吧。

何为 `-webkit-background-clip:text`

应用了这一个特性的意味是，以区块内的文字作为裁剪区域向外裁剪，文字的背景即为区块的背景，文字之外的区域都将被裁剪掉。

看个最简便易行的 Demo ，没有接纳 -webkit-background-clip:text :

XHTML

<div>Clip</div> <style> div { font-size: 180px;
font-weight: bold; color: deeppink; background: url($img) no-repeat
center center; background-size: cover; } </style>

<style>

div {

font-size: 180px;

font-weight: bold;

color: deeppink;

background: url($img) no-repeat center center;

background-size: cover;

}

</style>

作用如下：

See the Pen
background-clip:text by
Chokcoco (@Chokcoco) on
CodePen.

法一：`display:flex`

CSS3 弹性盒子(Flexible Box 或
Flexbox)，是一种布局格局，当页面须要适应区其余显示器大小以及配备档次时，它如故能确保元素拥有更适用的排布行为。

自然 flex 布局应用于活动端不错，PC
端须要全兼容的话，包容性不够，此处略过不谈。

不断更新，不断更新，不断更新，首要的作业说两遍。

不断更新，不断更新，不断更新，主要的事情说一回。

使用 `-webkit-background-clip:text`

俺们有些改造下方面的代码，添加 -webkit-background-clip:text：

div { font-size: 180px; font-weight: bold; color: deeppink; background:
url($img) no-repeat center center; background-size: cover;
-webkit-background-clip: text; }

div {

font-size: 180px;

font-weight: bold;

color: deeppink;

background: url($img) no-repeat center center;

background-size: cover;

-webkit-background-clip: text;

}

职能如下：

CodePen Demo

See the Pen
background-clip:text by
Chokcoco (@Chokcoco) on
CodePen.

观看此间，可能有人就纳闷了，亚洲必赢官网 2 啥玩意儿呢，那不就是文字设置 color 属性嘛。

议论一些有趣的CSS题目（一）–
左侧竖条的得以完成格局

议论一些有意思的CSS题目（一）–
左侧竖条的贯彻格局

将文字设为透明 `color: transparent`

别急！当然还有更好玩的，上面由于文字设置了颜色，挡住了 div
块的背景，如若将文字设置为透明吗？文字是足以设置为透明的 color: transparent 。

div { color: transparent; -webkit-background-clip: text; }

div {

color: transparent;

-webkit-background-clip: text;

}

亚洲必赢官网 3

职能如下(请在 Chrome 内核浏览器下见到)：

CodePen Demo

See the Pen clip:text && color:
transparent by Chokcoco
(@Chokcoco) on
CodePen.

因而将文字设置为透明，原本 div
的背景就显现出来了，而文字以为的区域一体被裁剪了，那就是 -webkit-background-clip:text 的作用。

法二：借助伪元素及 `text-align:justify`

概念如下 HTML 样式：

XHTML

</div>

俺们精通，有个 text-align:justify 可以兑现两端对齐文本效果。

text-align CSS属性定义行内内容（例如文字）怎么样相对它的块父元素对齐。text-align
并不控制块元素协调的对齐，只控制它的行内内容的对齐。

text-align:justify 表示文字向两侧对齐。

一开头我揣测使用它可以兑现，选拔如下 CSS ：

CSS

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

.justify{

text-align: justify;

}

.justify i{

width:24px;

line-height:24px;

display:inline-block;

text-align:center;

border-radius:50%;

}

结果如下：

亚洲必赢官网 4

Demo戳我

See the Pen justify1 by
Chokcoco (@Chokcoco) on
CodePen.

不曾收获意料之中的结果，并不曾兑现所谓的两头对齐，查找原因，在 W3C 找到这么一段解释:

最终一个水平对齐属性是 justify，它会带动自己的局地题目。CSS
中没有认证什么处理连字符，因为差其他语言有不一致的连字符规则。规范没有尝试去调和这么局地很可能不齐全的平整，而是干脆不提那几个问题。

额，我看完上面一大段解释如故没驾驭上边意思，再持续调查，才找到原因：

虽然 text-align:justify 属性是全包容的，不过要利用它完毕两端对齐，须求注意在模块之间添加[空格/换行符/制表符]才能起功效。

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

好的，大家品尝一下翻新一下 HTML 结构，接纳相同的 CSS：

XHTML

</div>

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

亚洲必赢官网 5

Demo戳我

See the Pen justify2 by
Chokcoco (@Chokcoco) on
CodePen.

啊哦，依旧要命啊。

再寻找原因，原来是出在最后一个要素上边，然后自己找到了 text-align-last 那些特性，text-align-last性能规定何以对齐文本的终极一行，并且 text-align-last 属性唯有在 text-align 属性设置为 justify 时才起成效。

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

CSS

.justify{   text-align: justify;   text-align-last: justify; //
新增这一行 } .justify i{   width:24px;   line-height:24px;
  display:inline-block;   text-align:center;   border-radius:50%; }

.justify{

text-align: justify;

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

}

.justify i{

width:24px;

line-height:24px;

display:inline-block;

text-align:center;

border-radius:50%;

}

意识终于可以了，达成了多列均匀布局：

亚洲必赢官网 6

Demo戳我

See the Pen justify-last by
Chokcoco (@Chokcoco) on
CodePen.

竣事了？没有，查看一下 text-align-last 的包容性：

亚洲必赢官网 7

可是一看包容性，惨不忍睹，唯有 IE8+ 和最新的 chrome
帮衬 text-align-last 属性，也就是说，假如您不是在选用 IE8+ 或者
最新版的 chrome 观察本文，上面 Demo 里的开辟的 codePen
例子如故没有均匀分布。

地方说了要使用 text-align:justify 完成多列布局，要同盟 text-align-last ，但是它的包容性又不佳，真的不可能了么，其实仍然一些，使用伪元素同盟，不要求 text-align-last 属性。

我们给 class="justify" 的 div 添加一个伪元素：

CSS

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

.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 了，伸张一个伪元素，效果如下：

亚洲必赢官网 8

由此给伪元素 :after 设置 inline-block 设置宽度 100% ，合作容器的 text-align: justify 就足以轻松达成多列均匀布局了。再多合营几句
hack 代码，可以落成包容到 IE6+ ，最珍重的是代码不长，很好明白。

最终兑现题目开首所示：

亚洲必赢官网 9

Demo戳我，任意列数均匀布局

See the Pen justifyLayout by
Chokcoco (@Chokcoco) on
CodePen.

此办法初见于那篇小说，得到原博主同意写入了本体系，卓殊值得一看：

别想多了，只可是是两端对齐而已

享有问题汇总在自身的 Github ，发到博客希望赢得愈来愈多的交换。

到此本文为止，假诺还有哪些疑点如故提出，可以多多调换，原创作品，文笔有限，才疏学浅，文中若有不正之处，万望告知。

打赏协理自己写出越来越多好作品，谢谢！

打赏小编

啄磨一些好玩的CSS题目（二）–
从条纹边框的落实谈盒子模型

探究一些有意思的CSS题目（二）–
从条纹边框的落到实处谈盒子模型

种种功用制作

询问了最宗旨的用法，接下去可以考虑怎么去采取那么些因素制作一些职能。

大大加强了文字的水彩填充采用
文字颜色的卡通效果
相当其余因素，完成部分任何巧妙的用法

打赏帮忙我写出愈来愈多好文章，谢谢！

任选一种支付办法

亚洲必赢官网 10
亚洲必赢官网 11

1 赞 10 收藏
评论

议论一些幽默的CSS题目（三）–
层叠顺序与堆栈上下文知多少

议论一些妙趣横生的CSS题目（三）–
层叠顺序与堆栈上下文知多少

心想事成文字渐变效果

利用那么些特性，大家得以相当简便的落实文字的渐变色效果。

效能如下(请在 Chrome 内核浏览器下看看)：

CodePen Demo

See the Pen background-clip: text
文字渐变色 by Chokcoco
(@Chokcoco) on
CodePen.

至于小编：chokcoco

亚洲必赢官网 12

经不住流年似水，逃不过此间少年。

个人主页 ·
我的小说 ·
63 ·

亚洲必赢官网 13

座谈一些有意思的CSS题目（四）–
从倒影说起，谈谈 CSS 继承
inherit

座谈一些有趣的CSS题目（四）–
从倒影说起，谈谈 CSS 继承
inherit

背景渐变动画 && 文字裁剪

因为有用到 background 属性，回想一下，我在上一篇精彩纷呈地创立背景象渐变动画！利用了渐变 + animation 巧妙的兑现了有的背景的渐变动画。能够很好的和本文的学识结合起来。

组合渐变动画，当然不自然必要衔接动画，那里我动用的是逐帧动画。协作 -webkit-background-clip:text，完结了一种，嗯，很红灯区的觉得。

意义如下(请在 Chrome 内核浏览器下看看)：

CodePen Demo

See the Pen 背景渐变动画 &&
文字裁剪 by Chokcoco
(@Chokcoco) on
CodePen.

座谈一些诙谐的CSS题目（五）–
单行居中，两行居左，超越两行省略

探讨一些妙趣横生的CSS题目（五）–
单行居中，两行居左，超越两行省略

图片窥探效果

再演示其中一个用法，利用多少个 div 层一起行使，设置同一的背景图片，父 div
层设置图片模糊，其中子 div
设置 -webkit-background-clip:text，然后选取 animation 移动子 div
，去偷看图片。

职能如下(请在 Chrome 内核浏览器下看看)：

CodePen Demo

See the Pen background-clip:
text by Chokcoco
(@Chokcoco) on
CodePen.

骨子里还有为数不少有意思的用法，只要敢想并最先实践，会发觉 CSS 真的意趣挺多的。

当然很四人会吐槽这么些特性的包容性，确实，我个人觉得前端现在的生态有一些面向以后编程的感觉到（调戏）。可是提前精晓完全而言利大于弊，多多拓宽自己的视野。

到此本文为止，若是还有何样问题如故指出，可以多多互换，原创小说，文笔有限，才疏学浅，文中若有不正之处，万望告知。

开本种类，谈谈一些幽默的 CSS
题目，题目类型天马行空，想到怎样说什么样，不仅为了拓宽一下解决问题的思路，更关乎一些便于忽略的
CSS 细节。

解题不考虑包容性，题目天马行空，想到什么说哪些，即便解题中有您感觉到生僻的
CSS 属性，赶紧去补习一下吗。

不断更新，不断更新，不断更新，首要的事情说一次。

有着问题汇总在自家的 Github 。

有意思的CSS题目（1）：
左侧竖条的达成情势
幽默的CSS题目（2）：
从条纹边框的落到实处谈盒子模型
诙谐的CSS题目（3）：
层叠顺序与堆栈上下文知多少
诙谐的CSS题目（4）：从倒影说起，谈谈 CSS 继承
inherit
有趣的CSS题目（5）：
单行居中，两行居左，当先两行省略
有趣的CSS题目（6）：
全包容的多列均匀布局问题
有意思的CSS题目（7）：消失的边界线问题
幽默的CSS题目（8）：纯CSS的导航栏Tab切换方案
诙谐的CSS题目（9）：巧妙完结 CSS
斜线
有意思的CSS题目（10）：结构性伪类拔取器
有趣的CSS题目（11）：reset.css
知多少？
幽默的CSS题目（12）：你该知情的字体
font-family
诙谐的CSS题目（13）：巧妙地创造背景象渐变动画！
诙谐的CSS题目（14）：纯 CSS 方式贯彻 CSS
动画的间歇与广播！
有趣的CSS题目（15）：谈谈 CSS 关键字 initial、inherit 和
unset

打赏帮忙自己写出越来越多好作品，谢谢！

打赏小编

富有题目汇总在自己的 Github 。

具备题目汇总在自身的 Github 。

打赏协助自己写出更加多好小说，谢谢！

任选一种支付情势

亚洲必赢官网 14
亚洲必赢官网 15

4 赞 3 收藏
评论

至于小编：chokcoco

亚洲必赢官网 16

经不住小运似水，逃但是此间少年。

个人主页 ·
我的篇章 ·
63 ·

亚洲必赢官网 17

6、全包容的多列均匀布局问题

何以兑现下列这种多列均匀布局（图中直线为了显示容器宽度，不算在内）：

亚洲必赢官网 18

6、全包容的多列均匀布局问题

什么贯彻下列这种多列均匀布局（图中直线为了显示容器宽度，不算在内）：

亚洲必赢官网 19

法一：`display:flex`

CSS3
弹性盒子(Flexible Box 或
Flexbox)，是一种布局格局，当页面要求适应分化的屏幕尺寸以及设备项目时，它如故能确保元素拥有更确切的排布行为。

本来 flex
布局应用于活动端不错，PC
端需求全包容的话，包容性不够，此处略过不谈。

法一：`display:flex`

CSS3
弹性盒子(Flexible Box 或
Flexbox)，是一种布局格局，当页面必要适应分歧的显示器尺寸以及设备项目时，它依然能确保元素拥有更适于的排布行为。

本来 flex
布局应用于活动端不错，PC
端必要全包容的话，包容性不够，此处略过不谈。

法二：借助伪元素及 `text-align:justify`

概念如下 HTML 样式：

<div class="container">
    <div class="justify">
        <i>1</i>
        <i>2</i>
        <i>3</i>
        <i>4</i>
        <i>5</i>
    </div>
</div>

俺们清楚，有个
text-align:justify 可以兑现两端对齐文本效果。

style=”font-size: 14px; font-family: verdana, geneva;”>text-align CSS属性定义行内内容（例如文字）如何相对它的块父元素对齐。text-align
并不控制块元素协调的对齐，只控制它的行内内容的对齐。

style=”font-size: 14px; font-family: verdana, geneva;”>text-align:justify 表示文字向两侧对齐。

一开首自己困惑使用它可以兑现，选择如下
CSS ：

.justify{
  text-align: justify;
}

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

结果如下：

亚洲必赢官网 20

Demo戳我

从未收获意料之中的结果，并不曾兑现所谓的互相对齐，查找原因，在 W3C 找到这样一段解释:

style=”font-size: 14px; font-family: verdana, geneva;”>最终一个品位对齐属性是 justify，它会带动自己的部分题材。CSS
中一向不证实如何处理连字符，因为分歧的语言有例外的连字符规则。规范没有尝试去调和那样有些很可能不齐全的平整，而是干脆不提那个问题。

额，我看完上面一大段解释仍然没领会下边意思，再持续调查，才找到原因：

虽然 text-align:justify 属性是全包容的，不过要选取它达成两端对齐，要求专注在模块之间添加[空格/换行符/制表符]才能起效果。

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

好的，大家品尝一下更新一下 HTML 结构，采纳同一的
CSS：

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

        <i>2</i>

        <i>3</i>

        <i>4</i>

        <i>5</i>

    </div>
</div>

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

亚洲必赢官网 21

Demo戳我

啊哦，依旧分外啊。

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

察觉终于得以了，落成了多列均匀布局：

亚洲必赢官网 22

Demo戳我

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

亚洲必赢官网 23

然则一看包容性，惨不忍睹，只有IE8+ 和最新的 chrome
扶助 text-align-last 属性，也就是说，尽管你不是在运用 IE8+ 或者
最新版的 chrome 观察本文，上边 Demo 里的打开的 codePen
例子如故没有均匀分布。

上边说了要使用 text-align:justify 达成多列布局，要合作 text-align-last ，但是它的包容性又不好，真的不可以了么，其实依旧有的，使用伪元素合作，不需求 text-align-last 属性。

我们给 class="justify" 的 div 添加一个伪元素：

.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 了，伸张一个伪元素，效果如下：

亚洲必赢官网 24

Demo戳我，任意列数均匀布局

因此给伪元素 :after 设置 inline-block 设置宽度 100% ，协作容器的 text-align: justify 就足以轻松达成多列均匀布局了。再多协作几句
hack 代码，可以兑现包容到 IE6+ ，最重大的是代码不长，很好掌握。

这就是说为何接纳了
:after 伪元素之后就可以落成对齐了呢？

原因在于 justify
只有在设有第二行的意况下，第一行才两端对齐，所以在这里，大家须求创立一个假的第二行，而
:after 伪元素正好再适合可是。

说到底落到实处题目伊始所示：

亚洲必赢官网 25

Demo戳我，任意列数均匀布局

此措施初见于那篇小说，得到原博主同意写入了本系列，极度值得一看：

别想多了，只可是是两端对齐而已

有着题目汇总在自身的 Github ，发到博客希望获得越来越多的交换。

到此本文截至，如若还有哪些疑点依旧提议，可以多多沟通，原创文章，文笔有限，才疏学浅，文中若有不正之处，万望告知。

法二：借助伪元素及 `text-align:justify`

概念如下 HTML 样式：

<div class="container">
    <div class="justify">
        <i>1</i>
        <i>2</i>
        <i>3</i>
        <i>4</i>
        <i>5</i>
    </div>
</div>

俺们精通，有个
text-align:justify 可以完结两端对齐文本效果。

style=”font-size: 14px; font-family: verdana, geneva;”>text-align CSS属性定义行内内容（例如文字）怎么样相对它的块父元素对齐。text-align
并不控制块元素协调的对齐，只控制它的行内内容的对齐。

style=”font-size: 14px; font-family: verdana, geneva;”>text-align:justify 表示文字向两侧对齐。

一伊始自己揣度使用它可以兑现，接纳如下
CSS ：

.justify{
  text-align: justify;
}

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

结果如下：

亚洲必赢官网 26

Demo戳我

尚无得到不出所料的结果，并从未达成所谓的两边对齐，查找原因，在 W3C 找到那样一段解释:

style=”font-size: 14px; font-family: verdana, geneva;”>最终一个程度对齐属性是 justify，它会带动自己的一些题材。CSS
中从未认证怎么样处理连字符，因为分裂的语言有例外的连字符规则。规范没有尝试去调和这样有些很可能不齐全的平整，而是干脆不提那些题目。

额，我看完上边一大段解释依旧没领会上面意思，再持续调查，才找到原因：

虽然 text-align:justify 属性是全兼容的，然则要使用它落成两端对齐，要求专注在模块之间添加[空格/换行符/制表符]才能起效果。

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

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

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

        <i>2</i>

        <i>3</i>

        <i>4</i>

        <i>5</i>

    </div>
</div>

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

亚洲必赢官网 27

Demo戳我

啊哦，依然相当啊。

再找找原因，原来是出在终极一个因素上边，然后自己找到了 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%;
}

察觉终于可以了，完成了多列均匀布局：

亚洲必赢官网 28

Demo戳我

停止了？没有，查看一下 text-align-last 的包容性：

亚洲必赢官网 29

只是一看包容性，惨不忍睹，唯有IE8+ 和最新的 chrome
辅助 text-align-last 属性，也就是说，即使您不是在采取 IE8+ 或者
最新版的 chrome 寓目本文，上边 Demo 里的打开的 codePen
例子依旧尚未均匀分布。

上边说了要选拔 text-align:justify 已毕多列布局，要协作 text-align-last ，但是它的包容性又不佳，真的不可能了么，其实照旧有的，使用伪元素协作，不必要 text-align-last 属性。

我们给 class="justify" 的 div 添加一个伪元素：

.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 了，增添一个伪元素，效果如下：

亚洲必赢官网 30

Demo戳我，任意列数均匀布局

透过给伪元素 :after 设置 inline-block 设置宽度 100% ，合作容器的 text-align: justify 就足以轻松达成多列均匀布局了。再多同盟几句
hack 代码，可以兑现包容到 IE6+ ，最敬重的是代码不长，很好领会。

那就是说为啥拔取了
:after 伪元素之后就可以完结对齐了吗？

原因在于 justify
只有在存在第二行的场合下，第一行才两端对齐，所以在那边，大家需求创制一个假的第二行，而
:after 伪元素正好再适合然而。

末尾落到实处题目开头所示：

亚洲必赢官网 31

Demo戳我，任意列数均匀布局

此格局初见于那篇文章，获得原博主同意写入了本种类，非凡值得一看：

别想多了，只可是是两端对齐而已

亚洲必赢官网 ，装有问题汇总在本人的 Github ，发到博客希望收获越多的调换。

到此本文截止，要是还有何样问题仍旧提出，可以多多沟通，原创小说，文笔有限，才疏学浅，文中若有不正之处，万望告知。

亚洲必赢登录

【亚洲必赢官网】全包容的多列均匀布局问题，谈谈一些妙不可言的CSS题目

有意思的CSS题目（6）：全包容的多列均匀布局问题

有趣的CSS题目（16）：奇妙的 background-clip: text

6、全包容的多列均匀布局问题

何为 `-webkit-background-clip:text`

法一：`display:flex`

使用 `-webkit-background-clip:text`

将文字设为透明 `color: transparent`

法二：借助伪元素及 `text-align:justify`

种种功用制作

打赏帮忙我写出愈来愈多好文章，谢谢！

心想事成文字渐变效果

至于小编：chokcoco

背景渐变动画 && 文字裁剪

图片窥探效果

打赏协助自己写出更加多好小说，谢谢！

至于小编：chokcoco

6、全包容的多列均匀布局问题

6、全包容的多列均匀布局问题

法一：`display:flex`

法一：`display:flex`

法二：借助伪元素及 `text-align:justify`

法二：借助伪元素及 `text-align:justify`

相关文章

有意思的CSS题目（6）： 全包容的多列均匀布局问题

有趣的CSS题目（16）： 奇妙的 background-clip: text

6、全包容的多列均匀布局问题

何为 -webkit-background-clip:text

法一：display:flex

使用 -webkit-background-clip:text

将文字设为透明 color: transparent

法二：借助伪元素及 text-align:justify

种种功用制作

打赏帮忙我写出愈来愈多好文章，谢谢！

心想事成文字渐变效果

至于小编：chokcoco

背景渐变动画 && 文字裁剪

图片窥探效果

打赏协助自己写出更加多好小说，谢谢！

至于小编：chokcoco

6、全包容的多列均匀布局问题

6、全包容的多列均匀布局问题

法一：display:flex

法一：display:flex

法二：借助伪元素及 text-align:justify

法二：借助伪元素及 text-align:justify

相关文章

有意思的CSS题目（6）：全包容的多列均匀布局问题

有趣的CSS题目（16）：奇妙的 background-clip: text

何为 `-webkit-background-clip:text`

法一：`display:flex`

使用 `-webkit-background-clip:text`

将文字设为透明 `color: transparent`

法二：借助伪元素及 `text-align:justify`

法一：`display:flex`

法一：`display:flex`

法二：借助伪元素及 `text-align:justify`

法二：借助伪元素及 `text-align:justify`