关于display inline的实验
实验开始
首先建一个table
<table style='border:1px solid;width:300px'> <tr> <td><div>div1</div><div>div2</div></td> <td>3</td> </tr> </table>
效果
两个div没有设宽度,所以他们默认的上下排列了
实验1
div1的display:inline
<table style='border:1px solid;width:300px'> <tr> <td><div style='display:inline'>div1</div><div>div2</div></td> <td>3</td> </tr> </table>
效果
div1变短了,因为他要与他后面的元素放在一行了,但div2没有任何设定所以它还是默认的宽度,也就在div1的下面了
如果把div2的display也设上inline的话,他也会变短,然后就会和div1一行了,
如图:
事实上是如果在div1后面的元素是固定长的那么他们也会在一行的
<table style='border:1px solid;width:300px'> <tr> <td><div style='display:inline'>div1</div><span style='outline:1px solid'>span2</span></td> <td>3</td> </tr> </table>
span的宽度和内容一致
但是如果 span在前面 div在前面会怎么样呢
<table style='border:1px solid;width:300px'> <tr> <td><span style='outline:1px solid; display:inline'>span1</span><div style='width: 50px'>div2</div></td> <td>3</td> </tr> </table>
即使div2的宽度很小,他还是在下面,想让div2上去的话,只要也给他设定display:inline就好了,所以要注意这里。
实验2
之前的div都变短了,那么如果想要div还是自动变宽的话怎么办呢
<table style='border:1px solid;width:300px'> <tr> <td><span style='outline:1px solid; display:inline; float:right;margin-top:6px'>span1</span><div>div2</div></td> <td><div style='display:inline; '>div2</div><span style='outline:1px solid; display:inline; '>span1</span></td> </tr> </table>
效果
请注意一下代码,第一个td里的span是写在div前面的,然后他用float:right飘到右边了,这样第一个td里的div就是自动宽度的
实验3
display的block, inline, inline-block的区别
block:是带有换行的区域,不管容器多宽都换行,div默认是这个
inline-block:容器够宽就排在一行,不够宽还是要换行, 这个换行是 整个line在换行
inline:容器够宽就排一行 像inline,不够宽就换行 像 block,
注意ie8以后的版本才有这个
相关推荐
项目改造中遇到DIV+CSS实现的table,新需求需要在表格使用单元格合并,网上调查返现CSS display:table实现的table表格,没有单元格的属性和样式,经过一番思考,曲折现实了单元格的合并,即采用正行嵌套一个单独的...
CSS常用属性和属性大全,CSS常用属性和属性大全,CSS常用属性和属性大全
CSS常用属性,CSS所有属性!!CSS常用属性,CSS所有属性!!
display 属性是用于控制布局的最重要的 CSS 属性。display 属性规定是否/如何显示元素。每个 HTML 元素都有一个默认的 display 值,具体取决于它的元素类型。大多数元素的默认 display 值为 block 或 inline。
css常用属性
CSS代码属性大全 全面介绍CSS主要属性
css2视觉手册 css属性大全css2视觉手册 css属性大全css2视觉手册 css属性大全css2视觉手册 css属性大全css2视觉手册 css属性大全css2视觉手册 css属性大全css2视觉手册 css属性大全
网页动画素材 css3属性绘制圆形旋转的黑洞动画特效(抖音资料)网页动画素材 css3属性绘制圆形旋转的黑洞动画特效(抖音资料)网页动画素材 css3属性绘制圆形旋转的黑洞动画特效(抖音资料)网页动画素材 css3属性...
css 属性大全css 属性大全css 属性大全css 属性大全css 属性大全css 属性大全css 属性大全css 属性大全
真实的实验报告,个人摸索3天的结果,可用性和参考性方面都得到认可。
CSS3 动画属性(Animation) CSS 边框属性(Border 和 Outline) CSS 背景属性(Background) Color 属性 Box 属性 CSS 尺寸属性(Dimension) 内容生成(Generated Content) 可伸缩框属性(Flexible Box) Grid ...
包含css的所有属性包含css的所有属性包含css的所有属性
CSS浮动属性Float详解 什么是CSS Float?
详细描述css背景属性。有案例进行支持,学习之后对css背景能很好的应用。
CSS CSS属性 速查表 CSS属性速查表
CSS属性、浏览器兼容与网页布局CSS属性、浏览器兼容与网页布局CSS属性、浏览器兼容与网页布局CSS属性、浏览器兼容与网页布局CSS属性、浏览器兼容与网页布局CSS属性、浏览器兼容与网页布局CSS属性、浏览器兼容与网页...
通过本次实验能熟练掌握CSS美化网站的基 本技巧和技能,在以后的学习、工作生活中能够应用,为我们工作带来,生活带来 方便。 2. 实验内容 1、页面总体布局设计,可以通过对选择"插入记录 布局对象 DIV标签"命令的...
CSS是层叠样式表(英文全称:Cascading Style Sheets)的简称,简单来说,就是网页布局的样式元素,网页界面的视觉效果,就是CSS做出来的。 目前,网页架构的标准版本是html5+CSS3,CSS的最新版也是CSS3,任何网页都...