方法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. rabbitMQ常用的命令

    rabbitMQ常用的命令 启动监控管理器:rabbitmq-plugins enable rabbitmq_management 关闭监控管理器:rabbitmq-plugins disable r ...

  2. JS 省市县三级联动

    $(".area").change(function(ent,arg){ var $this = $(this), level = $(this).attr("id&qu ...

  3. sklearn算法库的顶层设计

    sklearn监督学习的各个模块 neighbors近邻算法,svm支持向量机,kernal_ridge核岭回归,discriminant_analysis判别分析,linear_model广义线性模 ...

  4. Win8交互UX——鼠标交互

    针对触摸输入优化 Window 应用商店应用设计,并在默认情况下获得基本的鼠标支持. 设计和构建用户可以通过鼠标交互的 Windows 应用商店应用. 鼠标输入最适合那些需要精确指向和单击的用户交互. ...

  5. java基础---->java多线程的使用（十）

    这里介绍一下java中关于线程状态的知识,主要通过代码演示各种状态出现的时机.少年时我们追求激情,成熟后却迷恋平庸,在我们寻找,伤害,背离之后,还能一如既往的相信爱情,这是一种勇气.每个人都有属于自己 ...

  6. Javascript常见性能优化

    俗话说,时间就是生命,时间就是金钱,时间就是一切,人人都不想把时间白白浪费,一个网站,最重要的就是体验,而网站好不好最直观的感受就是这个网站打开速度快不快,卡不卡. 当打开一个购物网站卡出翔,慢的要死 ...

  7. Android Studio项目提交（或更新）到github的方法

    一 配置github登陆信息 二 上传工程到github 1. 2. 点击Share按钮 3. 点击ok按钮 状态栏提示: 4. 点击 No 按钮 5.AS右下脚弹出提示框 查看github网站,已经 ...

  8. remote: fatal: could not read Username for 'http://spapa.wicp.net:3000': No such device ors

    解决办法: git remote add origin https://{username}:{password}@github.com/{username}/project.git in my ca ...

  9. 实战BRTSvc一款我见过的最嚣张的挖矿软件

    第一步:发现告警 Suricata发现特征字符串jsonrpc,这个是匹配挖矿木马的一个重要特征.于是开始分析告警信息: 告警中可以提取出的有效信息如下: 目标IP:149.28.199.108 目标 ...

  10. 数字模型制作规范（转自Unity3D群）

    本文提到的所有数字模型制作,全部是用3D MAX建立模型,即使是不同的驱动引擎,对模型的要求基本是相同的.当一个VR模型制作完成时,它所包含的基本内容包括场景尺寸.单位,模型归类塌陷.命名.节点编辑, ...