多个inline元素、block元素、inline-block元素在父容器中的换行情况
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,就可以实现完美换行了。
多个inline元素、block元素、inline-block元素在父容器中的换行情况的更多相关文章
- 转帖 css的块元素、内联元素、内联块元素、display属性、浮动、定位
块元素 块元素,也可以称为行元素,布局中常用的标签如:div.p.ul.li.h1~h6.dl.dt.dd等等都是块元素,它在布局中的行为:1.支持全部的样式.2.如果没有设置宽度,默认的宽度为父级宽 ...
- html中的块元素(Block)和内联元素(Inline)(转)
我们首先要了解,所有的html元素,都要么是块元素(block).要么是内联元素(inline).下面了解一下块元素.内联元素各自的特点: 块元素(block)的特点: 1.总是在新行上开始:2.高度 ...
- 关于block和inline元素的float
CSS float 浮动属性 本篇主要介绍float属性:定义元素朝哪个方向浮动. 目录 1. 页面布局方式:介绍文档流.浮动层以及float属性. 2. float:left :介绍float为 l ...
- display:inline与display:block——行内元素显示与块级元素显示
display:inline 的作用是设置对象做为行内元素显示,inline是内联对象的默认值(ps:内联对象就是不自动产生换行的元素,比如span) 而我们一般用的div是块级元素,默认displa ...
- block与inline,inline和inline-block,块级和行内元素,行内替换和行内非替换元素
block:块级元素默认display属性为block:无论块内内容有多少,总是占满一行: inline:行内元素默认display属性为inline:只占据块内的内容的大小,不会占满一整行: inl ...
- 块级元素和行内元素的区别 (block vs. inline)
块级元素 (display: block) 独占一行,多个block元素会各自新起一行.默认情况下,block元素的宽度会填满父元素的宽度. 可以设置width, height属性.但是,即使设置了w ...
- 【学习笔记】block、inline(替换元素、不可替换元素)、inline-block的理解
本文转载 总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).blo ...
- block(块级元素)和 inline(内联元素) 的区别
block(块级元素)和 inline(内联元素) 的区别 (2009-01-05 10:32:07) 转载▼ 标签: 杂谈 分类: div+css div这样的块级元素,就会自动占据一定矩形空间,可 ...
- 【Web】block、inline、inline-block元素与background属性概述(案例实现社交账号注册按钮效果)
步骤三:社交账号注册按钮效果 文章目录 步骤三:社交账号注册按钮效果 案例的演示与分析 CSS属性与HTML标签 块级元素 内联元素 行内块级元素 CSS的display属性 CSS中的背景图片属性 ...
随机推荐
- cmstop框架中的js设计content.js
控制cmstop框架中action的js 内容模块 找出当前页面的js的思路01先找显示页面的当前文件.在页面文件中-->找(编辑,删除)按钮-->找获取这个按钮的js选择器 02看加载的 ...
- LeetCode OJ 297. Serialize and Deserialize Binary Tree
Serialization is the process of converting a data structure or object into a sequence of bits so tha ...
- 触动精灵 alilib
--gethtml function gethtml (url) local sz = require("sz") local http = require("szock ...
- 用java的socket来发送一个类
用socket可以简单的发送一些文本信息,太复杂的可能发送不了,比如图片音频可能要用到http来发送和接收了.最基本的使用socket来发送一个字符串,但有的时候我们希望能够发送一个类,这样serve ...
- 解决ORA-00904: invalid identifier标识符无效
方法/步骤 1 大部分情况下,此错误是由于引用了不存在的列名导致的.比如select name from Studtent 当studeng表中无name列时,系统就会报此错误. 2 解决思路是,确定 ...
- webstrom管理git
先写一段 webstrom文件名变色:1.绿色的文件添加 2.蓝色的原有文件修改 如果出现““No such file or directory”或类似的语句,说明缺少ssh的key.那么我们就得创建 ...
- viewpager处理(二):设置当前item时,让viewpager不出现滑动动画
我们在使用viewpager.setCurrentItem(position);的时候,viewpager出现滑动动画,如何去掉这个动画呢? 可以用viewpager.setCurrentItem(p ...
- “Installation error: INSTALL_PARSE_FAILED_MANIFEST_MALFORMED”
1. 有可能你的客户端已经安装过了,需要移调才能安装2. 你的清单文件AndroidManifest.xml写的有问题,检查一下
- AJAX 在手机上用时
Response.ContentType = "text/html; text/plain; charset=UTF-8";
- linq any() all() 返回true 或者false
一.any()只要有一个符合条件就返回true static void Main(string[] args) { //any 有符合条件的就返回true ,,,,,,,,,}; ); Console ...