Grail layout: two anchor, intermediate adaptive;
Code elements:
<div class="box"> <div class="content"> </div> <div class="left">左</div> <div class="right">右</div> </div>
Layout code:
.box {
margin: 0px auto;
width: 800px;
height: 200px;
border: 1px solid red;
padding: 0 200px;
}
Set the parent box to the padding value to make the width of the content becomes small, left to right and left side position.
.box>div {
float: left;
height: 200px;
}
.content {
width: 100%;
background-color: antiquewhite
}
.left {
width: 200px;
height: 200px;
background: cadetblue;
margin-left: -100%;
position: relative;
left: -200px;
}
.right {
width: 200px;
background: cadetblue;
margin-left: -200px;
position: relative;
left: 200px;
}
* / After the use of padding, because the parent container does not set the width, so the content region width becomes smaller, the width of the main on the small, on both sides of leaves enough position, but floating can not cross the parent container padding area, so we also need moving the relative position to a position around the column. / *
Flying wing:
To put a layer of an intermediate portion of the container, after doing so, a large container would no longer need to set the padding value, the left and right column boxes do not have to set the relative layout, streamlined code a lot, but will not change the layout is particularly narrow a mess of problems.
<div class="box"> <div class="cont"> <div class="center"> 内容 </div> </div> <div class="left"> 左 </div> <div class="right"> 右 </div> </div>
Layout code:
.box{ width: 800px; height: 400px; border:1px solid red; margin:100px auto; } .box>div{ float: left; height: 400px; } .cont{ width: 100%; } .center{ background: red; margin: 0 200px; height: 400px; } .left{ background: blue; width: 200px; margin-left: -100%; } .right{ background: pink; width: 200px; margin-left: -200px; }
The effect is so constructed,
