这两天看了不少文章，对于css布局多了一些理解，现在来总结下。

我们来写一个最普遍的Top、Left、Content、Right、Foot布局。

第一步：自然是写一个坯子

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

 <html>

     <head>

         <meta http-equiv="content-type" content="text/html; charset=utf-8" />

         <title>Css布局</title>

     </head>

     <body>

         <div id="parents">

            <div id="top">这是Top!</div>

            <div id="main">

                   <div id="left">这是Left!</div>

                <div id="content">这是Content!</div>

                <div id="right">这是Right!</div>

              </div>

            <div id="foot">这是Foot!</div>

         </div>

     </body>

 </html>

效果：

第二步: 我们给这些加上背景色，并将整个parents居中

 <style type="text/css">

     * {

     margin: 0;

     padding: 0;

     text-Align: center;

     }

     #parents {

         width: 600px;

         border: 1px solid;

         margin: 100px auto 0 auto;

     }

     #top {

         background: #cc00cc;

      }

     #left {

         background: #00cc00;

     }

     #content {

         background: #cccccc;

     }

     #right {

         background: #0000cc;

     }

     #foot {

         background: #cccc00;

     }

 </style>

效果：

我们给top和foot设置100的高度，并将left和content向左浮动，right向右浮动。

 <style type="text/css">

     * {

     　　margin: 0;

        padding: 0;

        text-Align: center;

     }

     #parents {

        width: 600px;

        border: 1px solid;

        margin: 100px auto 0 auto;

      }

     #top {

        background: #cc00cc;

        height: 100px;

     }

     #left {

        background: #00cc00;

        float: left;

     }

     #content {

        background: #cccccc;

        float: left;

     }

     #right {

        background: #0000cc;

        float: right;

     }

     #foot {

        background: #cccc00;

        height: 100px;

     }

 </style>

效果:

貌似有点不对，没事。把foot给clear一下就可以了！

 #foot {

     background: #cccc00;

     height: 100px;

     clear: both;

 }

效果：

我们给left、content、right分别设置宽度100px、400px、100px。

 #left {

     background: #00cc00;

     float: left;

     width: 100px;

 }

 #content {

     background: #cccccc;

     float: left;

     width: 400px;

 }

 #right {

     background: #0000cc;

     float: right;

     width: 100px;

 }

效果:

看起来貌似大功告成！

不过这里的设置还有一个大问题，在网页布局中，中间的left、content、right是根据实际需要添删内容的，而各列高度很多时候都不一样。比如我们设置left的高度为100px。

 #left {

     background: #00cc00;

     float: left;

     width: 100px;

     height: 100px;

 }

效果：

我们看到，当其中一个高度发生变化时，其余两者并没有随之改变，这样布局就出现了一个很大的漏洞。

如何使中间层的三者在其中随意一个高度发生变化时，依旧能保持三者高度一致呢？

这里就牵涉到一个负边距的使用技巧了。

这个方法称之为padding补偿法：

　　首先把列的padding-bottom设为一个足够大的值，再把列的margin-bottom设一个与前面的padding-bottom的正值相抵消的负值，父容器设置超出隐藏，这样子父容器的高度就还是它里面的列没有设定padding-bottom时的高度，当它里面的任一列高度增加了，则父容器的高度被撑到它里面最高那列的高度，其他比这列矮的列则会用它们的padding-bottom来补偿这部分高度差。因为背景是可以用在padding占用的空间里的，而且边框也是跟随padding变化的，这样就成功的使得三者列高最起码看起来是等高的。这样也就满足了我们的需求。

 #left {

     background: #00cc00;

     float: left;

     width: 100px;

     height: 100px;

     margin-bottom: -2000px;

     padding-bottom: 2000px;

 }

 #content {

     background: #cccccc;

     float: left;

     width: 400px;

     margin-bottom: -2000px;

     padding-bottom: 2000px;

 }

 #right {

     background: #0000cc;

     loat: right;

     width: 100px;

     margin-bottom: -2000px;

     padding-bottom: 2000px;

 }

效果:

现在产生了一个问题，高度溢出了。

我们可以对其父元素配置一个overflow: hidden来对溢出部分进行修剪。

 #main {

     overflow: hidden;

 }

这样就大功告成了：

此刻，我们给content添加内容改变他的高度。

 <div id="content">这是Content!<br><br><br>打算打算打<br><br><br>dwdoahdoa<br><br>的味道</div>

效果：

我们看到，当content的高度发生变化时，left和right的高度随之改变，这就是多列等高的奥秘。

最后附上完整代码：

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

 <html>

     <head>

         <meta http-equiv="content-type" content="text/html; charset=utf-8" />

         <title>PE Layout Example 1</title>

         <style type="text/css">

             * {

                 margin: 0;

                 padding: 0;

                 text-Align: center;

             }

             #parents {

                 width: 600px;

                 border: 1px solid;

                 margin: 100px auto 0 auto;

             }

             #top {

                 background: #cc00cc;

                 height: 100px;

             }

             #main {

                 overflow: hidden;

                 width: 100%;

             }

             #left {

                 background: #00cc00;

                  float: left;

                  width: 100px;

                  margin-bottom: -2000px;

                  padding-bottom: 2000px;

             }

             #content {

                 background: #cccccc;

                 float: left;

                 width: 400px;

                 margin-bottom: -2000px;

                  padding-bottom: 2000px;

             }

             #right {

                 background: #0000cc;

                 float: right;

                 width: 100px;

                 margin-bottom: -2000px;

                  padding-bottom: 2000px;

             }

             #foot {

                 background: #cccc00;

                 height: 100px;

                 clear: both;

             }

         </style>

     </head>

     <body>

         <div id="parents">

            <div id="top">这是Top!</div>

            <div id="main">

                   <div id="left">这是Left!</div>

                <div id="content">这是Content!<br><br><br>打算打算打<br><br><br>dwdoahdoa<br><br>的味道</div>

                <div id="right">这是Right!</div>

              </div>

            <div id="foot">这是Foot!</div>

         </div>

     </body>

 </html>

【CSS】 布局之多列等高的更多相关文章

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

    使用正padding和负margin对冲实现多列布局方法 这种方法很简单,就是在所有列中使用正的上.下padding和负的上.下margin,并在所有列外面加上一个容器,并设置overflow:hid ...

  2. CSS技巧 (2) · 多列等高布局

    前言  最近,面试的时候都碰到一些关于利用CSS实现多列等高布局或者一侧宽度固定,另一侧宽度自适应的问题,下面稍微总结一下: 先看一道题目 巧妙的多列等高布局 规定下面的布局,实现多列等高布局,要求两 ...

  3. CSS布局——横向两列布局

    1.固定两栏布局,使用float,注意对紧邻元素清除浮动影响.IE6在使用float布局同时设置横行margin的情况下会有双边距BUG,解决方案是加入_display:inline 代码如下: &l ...

  4. css奇技淫巧之—多列等高

    什么是等高布局? 先来看一个案例: 上图中的页面的主体内容是两列结构,左列是用来导航的,右列是用来显示内容的.我们看到它们有一个共同的边框,中间还有一条分隔线,左右两列的高度都是不固定的.这种情况下就 ...

  5. css布局之两列布局

    我们见过两列布局的网站也很多,不过这种两列布局的分为两种:自适应和固定宽度 1.自适应两列布局 <!DOCTYPE html> <html lang="en"&g ...

  6. CSS布局：两列，左边宽度自适应，右边宽度固定200px

    <div id="box1"> <div id="left1"></div> <div id="right1 ...

  7. css布局--两列布局，左侧固定，右侧自适应（其中左侧要可以拖动，右侧水平滚动条）

    (css布局所要实现的效果) 在前端面试中经常会被问到CSS布局,两列布局,左侧固定,右侧自适应.前几天去面试,遇到了这道题的升级版,要求左侧可拖动,右侧要有水平滚动条.拿到题目确实有些大脑短路,不知 ...

  8. css设置多列等高布局

    初始时,多个列内容大小不同,高度不同.现在需要设置不同的背景来显示,而且各个列的高度需要保持一致.那么这就需要利用到多列等高布局. 最终需要的效果: 1. 真实等高布局 flex 技术点:弹性盒子布局 ...

  9. CSS3中flexbox如何实现水平垂直居中和三列等高布局

    最近这些天都在弥补css以及css3的基础知识,在打开网页的时候,发现了火狐默认首页上有这样一个东西.

随机推荐

  1. Discovering Gold LightOJ - 1030 （概率dp）

    You are in a cave, a long cave! The cave can be represented by a 1 x N grid. Each cell of the cave c ...

  2. layui后台框架的搭建

    layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用.其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从 ...

  3. Spring Boot - Spring Cache

    缓存 服务器自身(内存)的缓存 利用java程序中的变量 简单 集群环境中多个实例无法共享同步 缓存服务器(一般支持集群.分布式) Redis Memcached Spring中使用注解使用缓存 启动 ...

  4. lua之base64加密和解密算法。

    local function encodeBase64(source_str) local b64chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnop ...

  5. [agc004e]Salvage Robots dp

    Description 蛤蟆国的领土我们可以抽象为H*W的笼子,在这片蛤土上,有若干个机器人和一个出口,其余都是空地,每次蛤蟆会要求让所有的机器人向某个方向移动一步,当机器人移动到出口时会被蛤蟆活摘出 ...

  6. bzoj2705Longge的问题

    题目链接 题意很简单 $$ans=\sum_{i=1}^{n}gcd(i,n)$$ 然后推一下式子,求一下欧拉函数就好了 细节是由于$BZOJ$的评测计时策略, 不能线性筛啊$……$ 必须每个数单独筛 ...

  7. 新公司，环境搭建，windows上的坑

    1 在windows上安装nodejs环境,node -v 后可以看到版本号 2 在windows上安装nvm管理node的版本,可以对node版本自由切换,使用5.3.0版本的node 3 在win ...

  8. 北航软院2014级C#期末考试部分考题解答

    博主注:本渣渣水平有限,文中若有不对的地方敬请指出,谢谢. 本文中大部分图片来自老师的PPT,感谢邵老师,想要的可以点击右边QQ联系我:) 一.选择 6.Which of the following ...

  9. 鼠标点击按钮控制图片移动或者键盘控制图片移动（解决问题：parseInt失效问题，用Number）

    在测试用鼠标点击按钮,使图片左右上下移动: 效果如下: 代码如下: <!DOCTYPE html> <html lang="en"> <head> ...

  10. JavaWeb学习笔记（二十二）—— 过滤器filter

    一.什么是过滤器 过滤器filter是JavaWeb三大组件之一,它与Servlet很相似!不过过滤器是用来拦截请求的,而不是处理请求的.WEB开发人员通过Filter技术,对web服务器管理的所有w ...