圣杯和双飞燕子

知识点

• 子元素的百分比都是针对父元素的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;}

图解

灵魂画手之双飞燕