inline-block text-align: justify 实现自适应布局, 当子inline-block之间没有空格时失效及原因
2017-03-09 10:57
756 查看
对于一个父container 可以设置其text-align: justify 使得其内部的文本自动两端对齐, 基于这个特性把内部的子标签设置为inline-block就能实现内部的子dom自动两端对齐。
但是如果我们改变html的代码, 改成这样
就会发现原本均匀分布的子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> 紧挨着的, 结果导致了无法失效预期的效果, 花了数个小时调试找原因。
<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> 紧挨着的, 结果导致了无法失效预期的效果, 花了数个小时调试找原因。
相关文章推荐
- display:inline-block配合text-align:justify实现块级元素均匀布局
- IE67实现inline-block布局
- text-align:justify实现文本两端对齐布局,兼容IE
- 用inline-block实现两列布局,在手机浏览器上有兼容性问题
- display:inline-block+text-align:justify实现列表元素的两端对齐
- 背景图片在ie7上显示不出来 在火狐上可以显示 找了半天也没有找到原因 后来发现 no-repeat与url之间没有空开 加了空格后ie7上能显示了
- inline-block元素与父div底边之间的间距问题(inline-block与vertical-align:baseline)
- 利用 text-align:justify 实现两端对齐布局
- display:inline-block/text-align:justify下列表的两端对齐布局
- inline-block + justify实现列表两端对齐
- 利用text-align:justify实现两端对齐的布局
- display:inline-block/text-align:justify下列表的两端对齐布局
- HTML标签换行导多个inline-block元素不能在同一行,img之间会有空格
- inline-block基线对布局的影响&vertical-align&vertical-align等应用
- display:inline-block/text-align:justify下列表的两端对齐布局
- 如何解决inline-block元素之间空格
- display:inline-block/text-align:justify下列表的两端对齐布局
- 关于float和inline-block实现不规则瀑布布局的探索
- inline-block布局产生间隙的原因及解决办法(水平、垂直)
- “display:block-inline形式的Span或Div中添加文字后,导致Span或Div排版掉落、错位”的原因及解决方法