// 删除wrap 代开注释
// html
<!--
<div class="container">
<div class="main">
<div class="wrap"></div>
</div>
<div class="left"></div>
<div class="right"></div>
</div>
-->
// css
.container{
border:1px solid red;
// padding:0 150px;
@mixin fl{
float:left;
min-height:200px;
}
&:after{
display:block;
content: "";
clear:both;
}
.main{
width:100%;
@include fl;
// background:#666;
.wrap{
margin:0 150px;
min-height:200px;
background:#666;
}
}
.left{
width:150px;
@include fl;
margin-left:-100%;
// position:relative;
// left:-150px;
background:#f4f4f4;
}
.right{
width:150px;
@include fl;
margin-left:-150px;
// position:relative;
// left: 150px;
background:#f4f4f4;
}
}
// 删除后最终
<div class="container">
<div class="main"></div>
<div class="left"></div>
<div class="right"></div>
</div>
.container{
border:1px solid red;
padding:0 150px;
@mixin fl{
float:left;
min-height:200px;
}
&:after{
display:block;
content:"";
clear:both;
}
.main{
width:100%;
@include fl;
background:#666;
}
.left{
width:150px;
@include fl;
margin-left:-100%;
position:relative;
left:-150px;
background:#f4f4f4;
}
.right{
width:150px;
@include fl;
margin-left:-150px;
position:relative;
left:150px;
background:#f4f4f4;
}
}