div+css布局,清除浮动
2014-11-22 20:47
260 查看
div默认是块状元素,新增一个div就要新开一行显示,启动display:inline后,将div的块状属性改为行内属性,所以两个div就可以在一行内显示了。
与其用div display:inline; 还不如直接用span,如果是布局div, 那最好还是用浮动(记得要清除浮动哦)或定位,各有优缺点
举例说明:
<head>
与其用div display:inline; 还不如直接用span,如果是布局div, 那最好还是用浮动(记得要清除浮动哦)或定位,各有优缺点
举例说明:
<head>
//清除浮动 <style type="text/css"> .clear{clear:both;} </style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <body><div style="border-left-color:black; border-left-style: solid; //增加边框 border-left-width: 1px; border-right-color: black; border-right-style: solid; border-right-width: 1px; border-top-color: black; border-top-style: solid; border-top-width: 1px; border-bottom-color: black; border-bottom-style: solid; border-bottom-width: 1px; "> <span style="white-space:pre"> </span><div style="float:left;">文字1</div> <span style="white-space:pre"> </span><div style="float:left;">文字2</div> <span style="white-space:pre"> </span><div style="float:left;">文字3</div> <span style="white-space:pre"> </span><div class="clear"></div> <span style="font-family: Arial, Helvetica, sans-serif;">//清除浮动,必须加</span> </div> </body> </html>
相关文章推荐
- css实际技巧---父div中有浮动的子div,父容器不能自适应高度,清除浮动,父容器自适应高度
- div+css布局问题:设置浮动后的div高度变化后不超出最外层div
- DIV+CSS浮动布局完美解决方案
- DIV+CSS笔记:第六课:浮动布局
- CSS利用浮动和清除浮动进行布局
- DIV+CSS布局之解读浮动定位
- DIV+CSS基础教程:清除浮动
- CSS布局模型 之 浮动模型(浮动的工作原理和清除浮动技巧?)
- 2016/2/24 1,css有几种引入方式 2,div除了可以声明id来控制,还可以声明什么控制? 3,如何让2个div,并排显示。4,清除浮动 clear:left / right / both
- 由布局学习CSS——浮动清除的深度探究(hasLayout和BFC对浮动的影响)
- (转)css中通常会用到浮动与清除,也是一个必须掌握的知识点,概念性的东西不多说,下面举几个例子,来说明它的用法:1.文字环绕效果 2.多个div并排显示 3.清除浮动(默认显示)
- DIV+CSS clear both清除产生浮动
- Div+CSS教程----DivCSS布局绝对定位和浮动
- CSS清除因为浮动布局导致父元素height值为0的三种方法
- [DIV/CSS] CSS-清除浮动
- Div+CSS教程----DivCSS布局绝对定位和浮动
- [HTML]DIV+CSS clear both清除产生浮动
- div+css之清除浮动
- css实现圣杯布局(两栏固定-中列浮动-中列div排在前面)--详解
- div+css布局之流体浮动布局