CSS实现三列布局方法总结

一、利用浮动float及clearfix清除浮动

HTML代码：

<div class="header"></div>
<div class="content clearfix">
    <div class="content-left"></div><div class="content-main"></div>
    <div class="content-right"></div>
</div>
<div class="footer"></div>

CSS代码：

*{ margin: 0; padding: 0;}
body{ padding: 20px; }
.header{ border:solid 1px #35b091; height: 100px; }
.content{ margin: 20px 0; }
.content-left,.content-main,.content-right{ border:solid 1px #35b091; height: 300px; width: 30%; }

/*思路一:float+clearfix*/
.content-left{ float: left; margin-right: 4.6%;}
.content-main{ float: left;}
.content-right{ float: right;}
.clearfix:after,.clearfix:before{ content: ''; display: table; }
.clearfix:after{clear: both;}

二、设置display: inline-block

注：linline-block元素之间会存在空白

HTML代码：

<div class="header"></div>
<div class="content">
    <div class="content-left"></div>
    <div class="content-main"></div>
    <div class="content-right"></div>
</div>
<div class="footer"></div>

CSS代码：

.content{ font-size: 0; } /*解决空白间隙方法一*/
.content-left,.content-main,.content-right{ display: inline-block; font-size: 14px;}
.content-left,.content-main{ margin-right: 4.6%; }

 

解决display:inline-block空白间隙：方法二

不用设置font-size：0，在闭环tag的后面添加一个打开的注释标签，在下一个开环tag的后面添加一个关闭注释的标签。如下：

<div class="header"></div>
<div class="content">
    <div class="content-left"></div><!--
    --><div class="content-main"></div><!--
    --><div class="content-right"></div>
</div>
<div class="footer"></div>

 

解决display:inline-block空白间隙：方法三

把标签放在同一行中

<div class="header"></div>
<div class="content">
    <div class="content-left"></div><div class="content-main"></div><div class="content-right"></div>
</div>
<div class="footer"></div>