实现两端对齐布局_text-align:justify

发布时间:2021-02-25 发布网站:前端之家 F2er.com
前端之家收集整理的这篇文章主要介绍了实现两端对齐布局_text-align:justify前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

css:

.box {

width: 256px;

height: 256px;

border-bottom: 1px dashed #ccc;

text-align: justify;

font-size: 0;

/*text-align:justify 要想有两端对齐的效果,需

要满足两点:一是有分隔点,如空格;二是要超过一行*/

}

/*如何要兼容 ie7就不要用伪元素,用dom元素代替*/

/* .box:before {

content: "";

display: inline-block;

height: 100%;

}*/

.box:after {

content: "";

display: inline-block;

width: 100%;

/*这个为满足text-align:justify要超过一行的要求*/

}

.bar {

display: inline-block;

width: 20px; height: 100px;

background: red;

}

html:

<!--第一个i标签前面千万不要有空格或者回车,空格和回车就是占用空白的位置,如果采用before底部对齐时会出现空白-->

<div id="box" class="box"><i class="bar"></i>

<i class="bar"></i>

<i class="bar"></i>

<i class="bar"></i>

</div>

但是当里面的i个数太多,就会换行,就导致换行的那几个个i就会在新的一行左右对齐分布,解决的方法是在最后一个i后面补上几个i,这个个数加上换行的i的个数要等于第一行i的个数,见代码

css

.bar {

display: inline-block;

width: 20%;

height: 100px;

background: red;

margin-right: 10px;

}

.place{

display: inline-block;

width: 20%;

vertical-align: bottom;

margin-right: 10px;

}html ,第一行有4个i,第二行有三个,所以只需要补一个

<div id="box" class="box">

<i class="bar"></i>

<i class="bar"></i>

<i class="bar"></i>

<i class="bar"></i>

<i class="bar"></i>

<i class="bar"></i>

<i class="bar"></i>

<span class="place"></span>

</div>

总结


以上是前端之家为你收集整理的实现两端对齐布局_text-align:justify全部内容,希望文章能够帮你解决实现两端对齐布局_text-align:justify所遇到的程序开发问题。

如果觉得前端之家网站内容还不错,欢迎将前端之家网站推荐给前端开发程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。