您的位置:首页 > 其它

inline-block text-align: justify 实现自适应布局, 当子inline-block之间没有空格时失效及原因

2017-03-09 10:57 756 查看
对于一个父container 可以设置其text-align: justify 使得其内部的文本自动两端对齐, 基于这个特性把内部的子标签设置为inline-block就能实现内部的子dom自动两端对齐。

<style>
.father{
position: absolute;

left: 100px;
top: 100px;
width: 200px;

/* 注意这里font-size为0 消除了white-space的宽度 */
font-size: 0;

/* 子标签设置inline-block 配合justify 实现自适应 */
text-align: justify;
border: 1px solid red;
}

/* 这样人工的创造一个换行 */
.father::after{
content: ' ';

width: 100%;
display: inline-block;
}

.father .child{
display: inline-block;

font-size: 10pt;
border: 1px solid blue;
}
</style>

<div class="father">
<div class="child">子1</div>
<div class="child">子2</div>
<div class="child">子3</div>
<div class="child">子4</div>
</div>


但是如果我们改变html的代码, 改成这样

<div class="father">
<div class="child">子1</div><div class="child">子2</div><div class="child">子3</div><div class="child">子4</div>
</div>


就会发现原本均匀分布的子dom 现在全部挤到左边去了, text-align: justify 失效了。查阅css相关规范text-align: justify 默认情况下是通过调整 inline-box 之间的 white-space 的宽度, 即通过对 white-space 的拉伸或压缩实现两端对齐, 这里的white-space实际上是广义的, html 在解释源文件中的 回车 换行 \t 空格(连续的1~n)的时候都是按照一个 white-space 来渲染的, 所以当上面html中的 .child 之间没有任何这类型字符的时候, 没有white-space来用于调整, text-align: justify 失效!

找到的一个规范文档: http://www.w3school.com.cn/tiy/c.asp?f=css_text-justify&p=7 当中机制其实比较复杂, white-space的处理还受到 css white-space 的影响, 上文中探讨的是默认情况下的表现

后记:

因为在用angular2开发的时候, 使用了*ngFor指令, 并且我希望能用 inline-box 和 text-align: justify 去实现内联盒子的自动两端对齐, 结果因为*ngFor生成出来的html, 子标签之间是没有其他符号像: <div></div><div></div><div></div><div></div> 紧挨着的, 结果导致了无法失效预期的效果, 花了数个小时调试找原因。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐