方法1:

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

    <style type="text/css">

        *

        {

            margin: 0;

            padding: 0;

        }

        #wrap

        {

            overflow: hidden;

            width: 1000px;

            margin: 0 auto;

            margin-top: 200px;

            background-color: blue;

            padding: 10px;

        }

        #left, #center, #right

        {

            margin-bottom: -9900px;

            padding-bottom: 10000px;

            margin-left: 10px;

            padding-left: 10px;padding-top: 10px;

            border: solid 1px yellow;

        }

        #left

        {

            float: left;

            width: 250px;

            background: #00FFFF;

        }

        #center

        {

            float: left;

            width: 400px;

            background: #FF0000;

        }

        #right

        {

            float: left;

            width: 250px;

            background: #00FF00;

        }

    </style>

</head>

<body>

    <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>

                <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>

    <p>

                center</p>

</body>

</html>

方法2:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>三列自适应高布局</title>

<style type="text/css">

html,body{margin:0; padding: 0;}

.fl { float: left; }

.container3 { background:green; overflow: hidden; position: relative;}

.container2 { background:yellow; position: relative; right: 30%;/*大小等于col3的宽度*/  }

.container1 { width: 100%; background:red; position: relative; right: 40%; /*大小等于col2的宽度*/}

.col1 { width: 26%;/*增加了2%的padding，所以宽度减少4%*/ position: relative; left: 72%;/*距左边呀增加2%就成72%*/ overflow: hidden;background-color: gray; }

.col2 { width: 36%;/*增加了2%的padding，所以宽度减少4%*/ position: relative; left: 76%; /*距左边有三个padding为2%,所以距离变成76%*/overflow: hidden; }

.col3 { width: 26%; /*增加了2%的padding，所以宽度减少4%*/position: relative; left: 80%;/*距左边5个padding为2%，所以距离变成80%*/ overflow: hidden; }

</style>

</head>

<body>

<div class="container3 fl">

    <div class="container2 fl">

        <div class="container1 fl">

            <div class="col1 fl">左<br/>小时候我有一个梦想，长大了我就忘了...</div>

            <div class="col2 fl">中<br/>小时候我有一个梦想，长大了我就忘了...小时候我有一个梦想，长大了我就忘了...</div>

            <div class="col3 fl">右<br/>小时候我有一个梦想，长大了我就忘了...小时候我有一个梦想，长大了我就忘了...小时候我有一个梦想，长大了我就忘了...小时候我有一个梦想，长大了我就忘了...小时候我有一个梦想，长大了我就忘了...小时候我有一个梦想，长大了我就忘了...</div>

        </div>

    </div>

</div>

</body>

</html>

CSS 3列等高的更多相关文章

  1. css两列等高布局

    布局方案 等高布局有几种不同的方法,但目前为止我认为浏览器兼容最好最简便的应该是padding补偿法.首先把列的padding-bottom设为一个足够大的值,再把列的margin-bottom设一个 ...

  2. 三列等高 css实现

    实现这个三列等高 布局需要最外层的一个div wrap容器 里面有三个div容器 这个最外层div 需要移除隐藏 overflow:hidden;  关键点就是三列div 同时margin-botto ...

  3. css设置多列等高布局

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

  4. 【CSS】 布局之多列等高

    这两天看了不少文章,对于css布局多了一些理解,现在来总结下. 我们来写一个最普遍的Top.Left.Content.Right.Foot布局. 第一步:自然是写一个坯子 <!DOCTYPE H ...

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

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

  6. 两列等高布局 padding+margin的负值 CSS布局奇淫技巧之-多列等高

    代码: 效果图: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/ ...

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

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

  8. 用css样式围剿等高列问题（转载）

    明修栈道暗度陈仓 该秘籍的心法只有十二个字:”隐藏容器溢出,正负内外边距.”看完下面的几行代码,再看这句话你真的可以看到圣光! 隐藏容器溢出.将外层容器的溢出设为隐藏: .container { ov ...

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

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

随机推荐

  1. Mac下Intellij IDea发布JavaWeb项目 详解一 (1、新建JavaEE Project并进行相应设置 2、配置tomcat)

    IDEA中 javaWeb项目的创建和tomcat配置(完整) 1.先新建JavaEE Project并进行相应设置 2.在配置tomcat Step1 新建JavaEE Project并进行相应设置 ...

  2. <转>特征工程（一）

    转自http://blog.csdn.net/han_xiaoyang/article/details/50481967 1. 引言 再过一个月就是春节,相信有很多码农就要准备欢天喜地地回家过(xia ...

  3. 【面试题】新东方.NET工程师面试题总结

    1.学校几本(是否统招).英语等级.大学成绩排名Top%几.当前月薪(入职前是否能提供薪资证明材料).期望月薪 二本,统招英语四级排名top10 2.做过的项目技术栈是什么?(例如 .NET.Sql ...

  4. 【Linux】 crontab 实现每秒执行

    linux crontab 命令,最小的执行时间是一分钟, 如果要在小于一分钟执行.就要换个方法来实现 1   crontab 的延时: 原理:通过延时方法 sleep N  来实现每N秒执行. cr ...

  5. shell截取字符串的一些简单方法

    一.使用${} 1.${var##*/}该命令的作用是去掉变量var从左边算起的最后一个'/'字符及其左边的内容,返回从左边算起的最后一个'/'(不含该字符)的右边的内容.使用例子及结果如下:

  6. Makefile中的MAKECMDGOALS

      make 在执行时会设置一个特殊变量 -- "MAKECMDGOALS" ,该变量记录了命令行参数指定的终极目标列表,没有通过参数指定终极目标时此变量为空.该变量仅限于用在特殊 ...

  7. Docker 容器管理：rancher

    Rancher:https://www.cnrancher.com/ 是一个开源的企业级全栈化容器部署及管理平台. 定位上和 K8s 比较接近,都是通过 web 界面赋予完全的 docker 服务编排 ...

  8. Ubuntu 16.04系统下软件中心Software闪退解决办法

    按住Ctrl+Alt+T打开终端输入: sudo apt-get update //更新 sudo apt-get dist-upgrade //升级 sudo apt-get install --r ...

  9. Thinkphp 验证码点击刷新解决办法

    HTML代码如下: <span> <input type="text" name="code" placeholder="验证码&q ...

  10. java的HashMap 原理

    https://www.cnblogs.com/chengxiao/p/6059914.html 哈希表(hash table)也叫散列表,是一种非常重要的数据结构,应用场景及其丰富,许多缓存技术(比 ...