方法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. ip防刷脚本

    #!/bin/sh #防刷脚本 #env ACCESS_PATH=/home/wwwlogs ACCESS_LOG=y.log IPTABLES_TOP_LOG=iptables_top.log DR ...

  2. iOS - 选取相册中iCloud云上图片和视频的处理

    关于iOS选取相册中iCloud云上图片和视频  推荐看:TZImagePickerController的源码,这个是一个非常靠谱的相册选择图片视频的库 .当然也可以自己写 如下遇到的问题 工作原因, ...

  3. IOS设计模式第三篇之外观设计模式

    外观设计模式: 这个外观设计模式提供了一个单独的接口给复杂的子系统.而不是暴露用户的一组类和API,你仅仅暴露一个简单的同一的API. 下面的图片解释这个概念: API的用户根本不知道后面系统的复杂性 ...

  4. 【cs229-Lecture3】Logistic回归

    参考: http://www.itongji.cn/article/12112cH013.html http://blog.csdn.net/zouxy09/article/details/20319 ...

  5. 【cs229-Lecture2】Gradient Descent 最小二乘回归问题解析表达式推导过程及实现源码（无需迭代）

    视频地址:http://v.163.com/movie/2008/1/B/O/M6SGF6VB4_M6SGHJ9BO.html 机器学习课程的所有讲义及课后作业:http://pan.baidu.co ...

  6. 云计算设计模式（二十三）——Throttling节流模式

    云计算设计模式(二十三)——Throttling节流模式 控制由应用程序使用,一个单独的租户或整个服务的一个实例的资源的消耗.这种模式可以允许系统继续运行并满足服务水平协议,即使当增加需求的资源放置一 ...

  7. Node.j中path模块对路径的操作

    一.path模块 https://nodejs.org/docs/latest/api/path.html#path_path_join_paths 1.join方法 ==> 该方法将多个参数值 ...

  8. jumpserver的安装

    原文地址:http://docs.jumpserver.org/zh/docs/step_by_step.html 为了保证服务器安全,加个堡垒机,所有ssh连接都通过堡垒机来完成,堡垒机也需要有身份 ...

  9. JAVA unicode转换成中文

    /** * * unicode 转换成 中文 * @param theString * @return */ public static String decodeUnicode(String the ...

  10. Linguistic Data Consortium (LDC)

    搞NLP的人经常会听到一个神秘的名字LDC,因为大量的论文所使用的数据都来自于LDC,本文就来揭露其神秘面目. About LDC: LDC,全名Linguistic Data Consortium, ...