知识点
- 子元素的百分比都是针对父元素的content区域的，不包含padding、border、margin区域的
- margin为外边距，即绘制元素的起点，起点参考上一个元素，可为正可为负
- position为relative的元素并不会脱离文档流，所以其margin会产生合并
布局之圣杯子
html部分
<div id="container">
<div id="main" class="col"></div>
<div id="left" class="col"></div>
<div id="right" class="col"></div>
</div>
css部分
body {min-width: 550px;}
.col {position: relative;float: left;}
#container {padding: 0 190px 0 190px;}
#main {width: 100%;height: 400px;background-color: #ccc;}
#left {width: 190px;height: 400px;margin-left: -100%;left: -190px;background-color: #0000FF;}
#right {width: 190px;height: 400px;margin-left: -190px;right: -190px;background-color: #FF0000;}
图解
灵魂画手之圣杯
布局之双飞燕
html部分
<div id="container">
<div id="main" class="col">
<div id="main-wrap"></div>
</div>
<div id="left" class="col"></div>
<div id="right" class="col"></div>
</div>
css部分
body {min-width: 550px;}
.col {float: left;}
#main {width: 100%;height: 400px;background-color: #ccc;}
#main-wrap {margin: 0 190px 0 190px;}
#left {width: 190px;height: 400px;margin-left: -100%;background-color: #0000FF;}
#right {width: 190px;height: 400px;margin-left: -190px;background-color: #FF0000;}
图解
灵魂画手之双飞燕
