方法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. lua中的字符串操作(模式匹配)

    (一). 模式匹配函数在string库中功能最强大的函数是:string.find(字符串查找)string.gsub(全局字符串替换)string.gfind(全局字符串查找)string.gmat ...

  2. JSP中的动态包含和静态包含的区别

    本文转载自http://blog.csdn.net/xuxu198899223/article/details/8501044 1. 语法格式 (1)静态包含:<%@ include file= ...

  3. x64枚举DPC定时器

    @写在前面      不同于x86,x64的DPC是被加密了的.对于x64DPC的兴趣始于我已经流产的scalpel计划.当时问某牛怎么遍历,得到的答案是“500大洋给代码”.真是R了狗了,好歹小哥我 ...

  4. Ubuntu 14.04 LTS 火狐浏览器中，鼠标选择文字被删除的解决办法

    这篇文章主要介绍了Ubuntu 火狐浏览器中,鼠标选择文字被删除的解决办法,需要的朋友可以参考下在终端中输入命令: ibus-setup将 “在应用程序窗口中启用内嵌编辑模式“ 选项取消

  5. laravel调用sql server存储过程并取得ReturnValue

    alter proc [dbo].[aaa](    @AgencyID int,--代理商ID    @AdminID int --结算操作人ID(管理员ID))asbegin    select ...

  6. 使用CMake编译跨平台静态库

    在开始介绍如何使用CMake编译跨平台的静态库之前,先讲讲我在没有使用CMake之前所趟过的坑.因为很多开源的程序,比如png,都是自带编译脚本的.我们可以使用下列脚本来进行编译:   . / con ...

  7. Apache 的mod_auth_cas模块的介绍和使用

    apache的mod_auth_cas模块是一个集成到apache中的cas客户端,一般是配合Apache的反向代理来使用,对某个url的请求先经过apache,apache会判断是否经过cas认证, ...

  8. Setting up Unicorn with Nginx

    gem install unicorn or gem 'unciron' 1 install Nginx yum install ... 2 Configuration vi /etc/nginx/n ...

  9. 23种设计模式之单例模式（Singleton）

    单例模式确保某一个类只有一个实例,而且自行实例化并向整个系统提供这个实例,这个类称为单例类,它提供全局访问的方法. public class SingleTon { private static Si ...

  10. iOS - 开源框架、项目和学习资料汇总(其他篇)

    数据库 1. FMDB – sqlite的工具, 多线程FMDatabaseQueue实例,FMDB数据库的使用演示和封装工具类.GXDatabaseUtils – 在FMDB基础上的工具.2. re ...