纯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来模仿列的边框，下面我们来看这两种方法：

转载于:https://www.cnblogs.com/zhrn/p/4466880.html