magin-left:-100%
这个百分比是以父元素内容长度的百分比,该父元素内容长度需要去除padding magin border。由于长度设置为了100%,需要一整行的宽度补偿margin,则移到最左边。
magin-right:-150px
margin负值会改变元素占据的空间,及移到父元素的最右边,并且该子元素width即为150px
<html>
<div class='container'>
<div class='main column'>main</div>
<div class='left column'>left</div>
<div class='right column'>right</div>
</div>
<style>
.container .column{
float: left;
position: relative;
}
.container{
padding-left: 200px;
padding-right: 150px;
}
.left{
width: 200px;
margin-left: -100%;
right:200px;
background-color:black;
}
.main{
width: 100%;
background-color: cyan;
}
.right{
width: 150px;
margin-right: -150px;
background-color: darkorchid;
}
</style>
</html>