CSS实现三列布局方法总结

时间：2021-01-13 16:10:48

aaarticlea/png;base64,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RDAGAAAAACCCMQAAAAAAEYwBAAAAAIhgDAAAAABABGMAAAAAACIYAwAAAAAQwRgAAAAAgAjGAAAAAABEMAYAAAAAIIIxAAAAAAARjAEAAAAAiGAMAAAAAEAEYwAAAAAAIhgDAAAAABDBGAAAAACACMYAAAAAAEQwBgAAAAAggjEAAAAAABGMAQAAAACIYAwAAAAAQARjAAAAAAAiGAMAAAAAEMEYAAAAAIAIxgAAAAAARDAGAAAAACCCMQAAAAAAEYwBAAAAAIhgDAAAAABABGMAAAAAACIYAwAAAAAQwRgAAAAAgAjGAAAAAABEMAYAAAAAIIIxAAAAAAARjAEAAAAAiGAMAAAAAEAEYwAAAAAAIhgDAAAAABDBGAAAAACACMYAAAAAAEQwBgAAAAAggjEAAAAAABGMAQAAAACIYAwAAAAAQARjAAAAAAAiGAMAAAAAEMEYAAAAAIAIxgAAAAAARDAGAAAAACCCMQAAAAAAEYwBAAAAAIhgDAAAAABABGMAAAAAACIYAwAAAAAQwRgAAAAAgAjGAAAAAABEMAYAAAAAIIIxAAAAAAARjAEAAAAAiGAMAAAAAEAEYwAAAAAAIhgDAAAAABDBGAAAAACACMYAAAAAAEQwBgAAAAAggjEAAAAAABGMAQAAAACIYAwAAAAAQARjAAAAAAAiGAMAAAAAEMEYAAAAAIAIxgAAAAAARDAGAAAAACCCMQAAAAAAEYwBAAAAAIhgDAAAAABABGMAAAAAACIYAwAAAAAQwRgAAAAAgAjGAAAAAABEMAYAAAAAIIIxAAAAAAARjAEAAAAAiGAMAAAAAEAEYwAAAAAAIhgDAAAAABDBGAAAAACACMYAAAAAAEQwBgAAAAAggjEAAAAAABGMAQAAAACIYAwAAAAAQARjAAAAAAAiGAMAAAAAEMEYAAAAAIAIxgAAAAAARDAGAAAAACCCMQAAAAAAEYwBAAAAAIhgDAAAAABABGMAAAAAACIYAwAAAAAQwRgAAAAAgAjGAAAAAABEMAYAAAAAIIIxAAAAAAARjAEAAAAAiGAMAAAAAEAEYwAAAAAAIhgDAAAAABDBGAAAAACACMYAAAAAAEQwBgAAAAAggjEAAAAAABGMAQAAAACIYAwAAAAAQARjAAAAAAAiGAMAAAAAEMEYAAAAAIAIxgAAAAAARDAGAAAAACCCMQAAAAAA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" alt="" width="695" height="279" />

一、利用浮动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:; padding:;}

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:; } /*解决空白间隙方法一*/

.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>

相关文章