经典的三列布局,俗称双飞燕布局,左右两列宽度固定,中间自适应三列都设置为左浮动,直接上代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body{ margin: 0; padding: 0;}
.left , .right{ height: 300px; width: 200px; float: left;}
.right{ margin-left: -200px; background-color: red; }
.left{ margin-left: -100%;background-color: #080808; }
.middle{ height: 300px; width: 100%; float: left; background-color: blue;}
</style>
</head>
<body>
<div class="middle">middle</div>
<div class="left">left</div>
<div class="right">right</div>
</body>
</html>
一般用float布局,当一列排满的时候,假如其他还有float元素,那么它在碰到其他float元素,会靠在右边,当一行排满,它就会在第二行重新排列,这里middle
width=100%,那么left
和right
是不是应该排在下一行,但是当你给left
设置margin-left:-100%
,right
设置margin-left:-200px 大于其自身的宽度时,都跑到第一行去了 (一定要设置大于-200px,否则跑到第二行)
这里的疑问就是,当一个float
元素他的margin
负值大于他的宽度时会发生什么?有哪些奇怪的特性?
1.一个元素的宽度为margin+padding+border+内容宽度
2.一个float:left的元素的左外边界必须再其前面出现的float:left元素的右外边界的后面,并且元素的的左边界不能超过其包裹元素的左内边界,右外边界也不能超过包括元素的右内边界
3.一个float:left元素的左外边界必须在其之前的任何一个float:left元素的右外边界的右边
如题中的css的定义及float元素在DOM中的位置
按HTML代码的顺序,首先放middle元素,然后是left,最后是right
1.
.middle
元素首先放置,占据整个父元素的宽度(container_width)2.
.left
元素接下来放置,其宽度为200px,margin-left:-100%3.
.left
元素的左外边界必须在middle元素右外边界的右边。margin-left:-100%形成的效果是元素的左外边界在.left
元素的左内边界向左100%*container_width处,同时需要满足前面提到的规则,那么形成的效果是.left
元素整体向左边移动了100%*container_width,其左内边界和middle的左外边界对齐。.left
元素的右外边界位于middle元素的左外边界的的200处。3.
.right
元素接下来放置,宽度为200px,margin-left:-200px,.right
的左外边界在其左内边界向右200px;4.
.right
元素的左外边界必须在之前出现的float:left右外边界的右边,对之前.left
元素和.middle
元素的分析,这个位置点就是.middle
元素的右外边界;形成的效果就是.right
元素左内边界向左移动了200px如果
.right
元素的设置margin-left:-100px时,元素宽度为-100+200=100px。如果放在.middle
同一行那么其右边界将超过包裹元素的的右内边界,故.right
将换行显示,并且左外边距将向右边移动100px,看到的效果是.right
元素只有100宽度的内容可见