純css實現div三列等高布局的最簡單方法簡化版/也可以多列

使用正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;
        }

優點：

這種可能實現多列等高布局，並且也能實現列與列之間分隔線效果，結構簡單，兼容所有瀏覽器

缺點：

這種方法存在一個很大的缺陷，那就是如果要實現每列四周有邊框效果，那么每列的底部（或頂部）將無法有邊框效果。

下面我們就針對這個缺陷來介紹兩種解決辦法，第一種是使用背景圖來模仿底部（或頂部）邊框；第二種方法是使用div來模仿列的邊框，下面我們來看這兩種方法：