多个inline元素、block元素、inline-block元素在父容器中的换行情况
2016-07-28 08:50
483 查看
1、首先看inine元素的换行情况
<style> *{padding:0;margin:0} div.wrap{width:200px;height:200px;border:1px solid #ccc;margin:10px;} .inline-element a{margin:0 5px 0 0;padding:0 5px 0 0;height:20px;line-height:20px;background:#ccc;} </style> <div class="wrap"> <span class="inline-element"><a href="">北京</a><a href="">上海</a><a href="">天津</a><a href="">辽宁</a><a href="">吉林</a><a href="">黑龙江</a></span> </div> <div class="wrap"> <span class="inline-element"><a href="">beijing</a><a href="">shanghai</a><a href="">tianjin</a><a href="">123456</a><a href="">jiling </a></span> </div>显示情况:
多个inline元素在父容器内表现:汉字会折断换行;字母数字不换行,浏览器默认设置下会溢出父元素如果想让字母、数字进行换行显示,有两种设置方法,第一种是在父包含元素设置 word-break: break-all,另外一种是:word-wrap:break-word;这两种都有可能会打破元素的连续性,进行破坏性换行。
word-break: break-all的情况:过长的词语“WelcomeToChinaWelcomeToBeiJing”本行显示不下的情况下,折断词语进行显示。可最少占用空间
.wrap-inline{width:200px;height:200px;border:1px solid red;margin:10px;word-break:break-all} <div class="wrap-inline"> <p>123456 你好 WelcomeToChinaWelcomeToBeiJing</p> </div>
word-wrap:break-word的情况:可以看出,过长的单词“WelcomeToChinaWelcomeToBeiJing”在本行显示不下的情况下,会重新起一行开始显示
1 .wrap-inline{width:200px;height:200px;border:1px solid red;margin:10px;word-wrap:break-word;} 2 3 <div class="wrap-inline"> 4 <p>123456 你好 WelcomeToChinaWelcomeToBeiJing</p> 5 </div>下面这篇文章有助于理解 你真的了解word-wrap和word-break的区别吗?2、多个block元素的换行情况:汉字、字母、数字都独占一行
.wrap-block{width:200px;height:200px;border:1px solid red;margin:10px;}
.wrap-block a{margin:0 5px 0 0;padding:0 5px 0 0;height:20px;line-height:20px;background:#ccc;display:block;}
<div class="wrap-block"> <a href="">内蒙古</a><a href="">青岛</a><a href="">青岛</a><a href="">青岛</a><a href="">内蒙古</a> </div> <div class="wrap-block"> <a href="">11111</a><a href="">222222</a><a href="">cccccc</a><a href="">d</a><a href="">eeeee</a> </div>3、inline-block元素情况:不论是中文、数字、单词词组都会完整显示,完美,推荐使用inline-block设置类似的场景。
.wrap-inline-block{width:200px;height:200px;border:1px solid red;margin:10px;} .wrap-inline-block a{margin:0 10px;height:20px;line-height:20px;background:#ccc;display:inline-block;} <div class="wrap-inline-block"><a href="">内蒙古</a><a href="">青岛</a><a href="">青岛</a><a href="">内蒙古</a><a href="">内蒙古</a> </div> <div class="wrap-inline-block"> <a href="">11111</a><a href="">222222</a><a href="">cccccc</a><a href="">d</a><a href="">eeeee</a> </div>使用场景:下方的城市列表,可以设置子元素为inline-block,就可以实现完美换行了。
相关文章推荐
- [20160727][文件夹重命名]
- 我的文章:JSP
- [Codeforces 451A] Game With Sticks (博弈)
- HDU 5761 Rower Bo(多校3)
- Java中ProcessBuilder使用
- 关于智能家居主界面,通话记录界面设计的相关问题(ViewPager以及自定view)
- shadertoy 跳动的心
- python包
- 浅谈PHP弱类型安全
- CentOS6.5安装与配置JDK-7
- crontab 定时任务
- 关于JS变量和作用域详解
- Android OpenGL 显示基本图形及相关概念解读
- POJ 3641 Pseudoprime numbers 【快速幂】
- SDUT3324顺序表应用1:多余元素删除之移位算法
- 2016 Personal Training #6 Div.2
- 判断图的连通性
- Spring事务传播简介
- input框自动填充内容背景颜色为黄色解决方法
- Android Toolbar菜单动态切换item的图标