方法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. Delphi应用程序的调试（一）

    集成式调试器是Delphi IDE的一个重要特性.该调试器使用户能方便地设置断点.监视变量.检查对象等等.在运行程序时,使用该调试器能快速查找出程序发生了什么(或未发生什么).一个号的调试器对程序开发 ...

  2. 【linux系列】centos7配置桥接模式静态IP

    一.设置桥接模式 VMware->Edit->Virtual Network Edit 二.查看物理机的ip地址 三.根据物理机的ip地址,设置linux虚拟机的ip地址 四.网络重启 五 ...

  3. 原生js--事件类型

    1.表单事件: submit事件 reset事件 click事件 change事件 focus事件(不冒泡) (IE和ES5支持冒泡的focusin) blur事件(不冒泡) (IE和ES5支持冒泡的 ...

  4. laravel连sql server报invalid handle returned问题解决方案

    https://github.com/Microsoft/msphpsql/issues/116 4.1.1驱动下载地址 https://github.com/Microsoft/msphpsql/r ...

  5. mint下截图工具shutter的安装和使用设置

    [原创作品,技术交流.允许转载,转载时请务必以超链接形式标明文章原始出处 .作者信息.如有错误,请指正] /** author: lihaibo date: 1/25/2016 */ 今天安装了双系统 ...

  6. 使用 Gogs 搭建自己的 Git 服务器

    安装过程分为这些步骤: 新建用户: 下载源码编译 / 下载预编译二进制打包: 运行安装: 配置调整: 配置 nginx 反向代理: 保持服务运行: 注意,这里默认你已经安装好了 MySQL 服务器和 ...

  7. 其它终端设备连接gmail账户提示密码错误解决方法

    换新手机配置Google Account继续使用Gmail服务,输入用户名.密码进入状态同步一段时间后再次提示输入用户名.密码并显示账号信息不正确.网上有人提到"修改用户密码"再进 ...

  8. vuejs学习资料

    Vue.js 是一个轻巧.高性能.可组件化的MVVM库,同时拥有非常容易上手的API,让编写动态的UI界面变得轻松简单. 这里是我整理的相关学习资料: vue.js 中文api vue.js gith ...

  9. Docker Swarm——集群管理

    前言 之前在总结docker machine的时候,当时对docker理解还不够深入,甚至还不知道 docker machine 与 docker swarm 的区别. 在查阅资料以及官方文档之后,今 ...

  10. LCA最近公共祖先（least common ancestors）

    #include"stdio.h" #include"string.h" #include"iostream" #include" ...