css三列布局（一）

来源：互联网发布：软件租赁报价单模板编辑：程序博客网时间：2024/05/23 17:01

这里写图片描述
这就是一个三列等高布局的效果，运用了padding补偿法，先上代码：
dom结构：

<div class="container">    <div class="left">        fefwefew    </div>    <div class="center">        wefwefwe    </div>    <div class="right">        <p>ewtfrweqrferq</p>        <p>ewtfrweqrferq</p>        <p>ewtfrweqrferq</p>        <p>ewtfrweqrferq</p>        <p>ewtfrweqrferq</p>    </div>  </div>

css代码

.container{    width: 1000px;    margin: 50px auto;    overflow: hidden;}.left,.center,.right{    float: left;    width: 333px;    padding-bottom: 10000px;    margin-bottom: -10000px;                }.left{    background: red;}.center{    background: yellow;}.right{    background: green;}

下面我们来谈一下原理，我们需要明白的是overflow:hidden;是根据什么来界定的，也就是说怎么样就算超出了这个容器呢？（这里所指的是没有指定容器的高度）根据的是容易内元素的外边距，看上面的代码，我们首先给三个子div增加padding-bottom，使整个盒子的高度增加，于此同时，三个子div的外边距也在很远很远的位置，所以我们需要将margin-bottom给拿上来，于是我们就做了一个正负相抵的操作，这时我们的right的底部外边距与其本身content area在同一基线上，也是由于right的底部外边距的这条基线位于最底部，所以父div进行overflow后得到我们想要的三列等高效果。

0 0