经典的三列布局,俗称双飞燕布局,左右两列宽度固定,中间自适应三列都设置为左浮动,直接上代码。
<!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负值大于他的宽度时会发生什么?有哪些奇怪的特性?
一个元素的宽度为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宽度的内容可见
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。