三列布局,中间自适应,尝试了两种方法
float
.mydiv{
background-color: #eee;
margin:20px;
padding: 20px;
border: solid 1px #999;
overflow: auto;
}
.left {
float: left;
width: 160px;
height: 100px;
background: blue;
padding: 20px;
}
.right{
float: right;
width: 80px;
height: 300px;
background: blue;
padding: 20px;
}
.middle{
margin-left: 220px;
margin-right: 140px;
background: red;
height: 200px;
padding: 20px;
}
.clearfix{
clear: both;
}
看到一篇文章:http://www.barelyfitz.com/screencast/html-training/css/positioning/,里面有这么一句话:
We can "float" an element to push it as far as possible to the right or to the left, and allow text to wrap around it.
“wrap around it”非常重要,float与absolute有类似的功能,在这一点上却大不相同,下面会讲到。
position
mydiv{
background-color: #eee;
margin:20px;
padding: 20px;
border: solid 1px #999;
position: relative;
}
left {
position: absolute;
left: 20px;
width: 160px;
height: 100px;
padding: 20px;
}
right{
position: absolute;
right: 20px;
width: 80px;
height: 260px;
padding: 20px;/*absolute已经脱离文档流,无法撑开父元素;*/
}
middle{
margin-left: 220px;
margin-right: 140px;
height: 200px;
padding: 20px;
}
需要设置父元素为relative,子元素的absolute才会相对于父元素绝对定位。
这种方法的局限性在于,必须设置父元素的高度为固定,因为absolute的子元素已经脱离文档流,不能撑开父元素,或者会遮盖同级的兄弟元素。
也就是说这种方法不能自适应高度布局。对于子元素高度不确定的情况这种方法也就不能使用了。当然用js脚本进行控制也可以。
关于absolute和float区别。
absolute是完全脱离文档流,两个设置了absolute的元素甚至都可以互相覆盖。
而关于float,W3C手册中有这么一句话:由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。
对于普通流中的块框不存在,也就是说对于float元素、文档中的行内元素,浮动元素是存在的。表达有点晦涩???具体的说,float:left遇到float:left,会停下来并排显示而不是覆盖。而对于行内元素:图片和文字,会“wrap around it”,就是包围float元素。
但是float和absolute都会出现无法撑开父元素的问题:
这时候absolute就比较鸡肋了,在多栏不确定高度的布局中,absolute没有办法解决父元素自适应高度的问题(参考:http://www.barelyfitz.com/screencast/html-training/css/positioning/)而float可以有一些清除float的方法,上面采用了overflow: auto;和.clearfix方法。清除浮动绝对是个大问题,接下来也会继续学习。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。