三栏布局实例（自由浮动+圣杯+双飞翼）
2016-11-30 本文已影响0人
Garden_Z
话不多说，直接上源码，源码内有解析
aa.JPG
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3 column</title>
<style>
body{ text-align: center; }
h2{ background-color: teal; text-align: center; padding: 10px; }
i{ color: purple; }
.row1{ background-color: #a6e1ec; }
.row1 .left{ float: left; width: 200px; height: 200px; background-color: #a94442; }
.row1 .center{ min-height: 100px; margin: 0 200px; background-color: #aaaaaa; padding: 0 20px; }
.row1 .center:after{ /* 消除内部元素浮动引起的高度塌陷，保证父元素高度为子元素最高的高度 */ content: ''; display: table; clear: both; }
.row1 .right{ float: right; width: 200px; height: 200px; background-color: aquamarine; }
.row2{ background-color: #a6e1ec; overflow: hidden; /* BFC -- 消除内部元素浮动引起的高度塌陷 */ padding: 0 200px; }
.row2 .left{ float: left; width: 200px; height: 200px; background-color: #a94442; margin-left: -100%; position: relative; left: -200px; }
.row2 .center{ float: left; width: 100%; min-height: 100px; background-color: #aaaaaa; }
.row2 .right{ float: left; width: 200px; height: 200px; background-color: aquamarine; margin-left: -200px; position:relative; right:-200px; }
.row3{ background-color: #a6e1ec; overflow: hidden; /* BFC -- 消除内部元素浮动引起的高度塌陷 */ }
.row3 .left{ float: left; width: 200px; height: 200px; background-color: #a94442; margin-left: -100%; }
.row3 .center{ float: left; width: 100%; min-height: 100px; background-color: #aaaaaa; }
.row3 .center .inner{ margin: 0 200px; }
.row3 .right{ float: left; width: 200px; height: 200px; background-color: aquamarine; margin-left: -200px; }
.row4{ background-color: #a6e1ec; overflow: hidden; width: 100%; } .row4 .left{ float: left; width: 33.33%; background-color: #a94442; } .row4 .center{ float: left; width: 33.33%; background-color: #aaaaaa; } .row4 .right{ float: left; width: 33.33%; background-color: aquamarine; }
</style>
</head>
<body>
<h2>三栏布局之自由浮动</h2>
<div class="row1">
<div class="left">左侧</div>
<div class="right">右侧</div>
<div class="center">
<h3>自由浮动三栏方案主要关键点</h3>
<p>1、左右侧边浮动，中间正常流</p>
<p>2、左侧左浮动，右侧右浮动</p>
<p>3、左右侧元素放<i>前</i>，中间元素放<i>后</i></p>
<p>4、清除浮动引起的高度塌陷，本例采用给中间栏添加:after伪类CSS清除</p>
</div>
</div>
<h2>三栏布局之圣杯</h2>
<div class="row2"> <div class="center">
<h3>圣杯布局方案主要关键点</h3>
<p>1、三栏均浮动</p>
<p><i>2、父元素左右内补padding对应左右侧栏宽度</i></p>
<p><i>3、左右侧元素relatice相对定位，左侧左偏移（left: -XXXpx;），右侧右偏移（left: -XXX0px;）</i></p>
<p>4、左右侧元素负值margin-left，左侧margin-left: <i>-100%</i>(使得元素上移到上一行的行首)，右侧margin-left: <i>-自身宽度</i></p>
<p>5、中间元素放<i>前</i>，左右侧元素放<i>后</i></p>
<p>6、清除浮动引起的高度塌陷，本例采用给父元素添加overflow:hidden类CSS清除</p>
</div>
<div class="left">左侧</div>
<div class="right">右侧</div>
</div>
<h2>三栏布局之双飞翼</h2>
<div class="row3">
<div class="center">
<div class="inner">
<h3>双飞翼布局方案主要关键点</h3>
<p>1、三栏均浮动</p>
<p><i>2、中间栏需额外添加一个子元素</i></p>
<p><i>3、中间栏width:100%，其子元素的左右margin对应左右侧栏宽度</i></p>
<p>4、左右侧元素负值margin-left，左侧margin-left: <i>-100%</i>(使得元素上移到上一行的行首)，右侧margin-left: <i>-自身宽度</i></p>
<p>5、中间元素放<i>前</i>，左右侧元素放<i>后</i></p>
<p>6、清除浮动引起的高度塌陷，本例采用给父元素添加overflow:hidden类CSS清除</p>
</div>
</div>
<div class="left">左侧</div>
<div class="right">右侧</div>
</div>
<h2>三栏布局之百分比</h2>
<div class="row4">
<div class="left">左侧33.33%</div>
<div class="center">中间33.33%</div>
<div class="right">右侧33.33%</div>
</div>
</body>
</html>
