纯css实现div三列等高布局的最简单方法简化版/也可以多列

浏览数：19 / 时间：2015年06月09日

使用正padding和负margin对冲实现多列布局方法

这种方法很简单，就是在所有列中使用正的上、下padding和负的上、下margin，并在所有列外面加上一个容器，并设置overflow:hiden把溢出背景切掉。

html代码

<div id="wrap">
    <div id="left">
        <p>
        left</p>
        <p>
        left</p>
        <p>
        left</p>
        <p>
        left</p>
        <p>
        left</p>
    </div>
    <div id="center">
        <p>
        center</p>
        <p>
        center</p>
        <p>
        center</p>
        <p>
        center</p>
        <p>
        center</p>
        <p>
        center</p>
        <p>
        center</p>
        <p>
        center</p>
        <p>
        center</p>
    </div>
    <div id="right">
        <p>
        right</p>
        <p>
        right</p>
        <p>
        right</p>
    </div>
</div>

css代码

*
        {
            margin: 0;
            padding: 0;
        }
        #wrap
        {
            overflow: hidden;
            width: 1000px;
            margin: 0 auto;
        }
        #left, #center, #right
        {
            margin-bottom: -10000px;
            padding-bottom: 10000px;
        }
        #left
        {
            float: left;
            width: 250px;
            background: #00FFFF;
        }
        #center
        {
            float: left;
            width: 500px;
            background: #FF0000;
        }
        #right
        {
            float: right;
            width: 250px;
            background: #00FF00;
        }