<!doctype html>

<html>

<head>

<meta />

<title>Title</title>

<style type="text/css">

*{ margin:0; padding:0;}

.wrap { margin: 0 auto; width: 600px; clear: both; overflow: hidden; }

.left {margin-bottom: -8000px; padding-bottom: 8000px; width: 300px; float: left; background: #f00; }

.right {margin-bottom: -8000px; padding-bottom: 8000px; width: 200px; float: right; background: #0f0; }

</style>

</head>

<body>

<div class="wrap">

    <div class="left">

        <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </p>

    </div>

    <div class="right">

        <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text t text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </p>

    </div>

</div>

</body>

</html>

原理： 父盒子包含两个div，这两个div的不用写高度，而是都写上padding-bottom: 10000px;margin-bottom: -10000px;然后给父盒子加是overflow：hidden；如果填充这两个div，较高的那个div的高度将决定父盒子的高度。

纯css实现两列等高的更多相关文章

  1. 如何用纯CSS布局两列，一列固定宽度，另一列自适应？

    大家都知道好多网站都是左右布局的,很多公司在笔试和面试环节也常常问这个问题.一个去网易的师兄说14年腾讯面试的时候问过这个问题,网易在笔试和面试时候也问过这个问题,还有很多互联网公司也都涉及到这个问题 ...

  2. 多种方法实现div两列等高（收集整理）

    HTML骨架 <div id="header">头部</div> <div id ="container"> <div ...

  3. JQuery 实现两列等高并自适应高度

    想要使用 JQuery 实现两列等高并自适应高度,其实也很简单,原理就是取得左右两边的高度,然后判断这个值,把大的值赋给小的就行了.看代码: $(document).ready(function() ...

  4. wpf ListBox,item两列不等高。

    业务有这样的需求,类似瀑布流.内容两列不等高展示. 只需要继承panel,重写MeasureOverride和ArrangeOverride方法就行了. 很简单,内容都在代码里. using Syst ...

  5. DIV+CSS左右两列自适应高度的方法

    我们在用DIV+CSS布局网页的时候,必然会遇到左右两列自适应高度的问题,就是左边列的背景会随着右边列内容的增加也相应的增加高度,下面就教大家DIV+CSS左右两列自适应高度的方法. 下面给出最终的效 ...

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

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

  7. css设置多列等高布局

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

  8. css布局--两列布局，左侧固定，右侧自适应（其中左侧要可以拖动，右侧水平滚动条）

    (css布局所要实现的效果) 在前端面试中经常会被问到CSS布局,两列布局,左侧固定,右侧自适应.前几天去面试,遇到了这道题的升级版,要求左侧可拖动,右侧要有水平滚动条.拿到题目确实有些大脑短路,不知 ...

  9. 前端应该掌握的CSS实现多列等高布局

    1.引言 我们在写页面的时候,有的时候会遇到多栏布局,每个栏目里面的内容有的时候可能不一样,这样就会导致每个栏目实际的高度也是不一样的,如果每个栏目有背景颜色的,就会导致每个栏目的底部是对不齐的,用户 ...

随机推荐

  1. filter 简介

    概述 filter() 方法使用指定的函数测试所有元素,并创建一个包含所有通过测试的元素的新数组. 语法 var new_arrary = arr.filter(callback[, thisArg] ...

  2. 魅族MX3\MX2 在MTP模式下恢复手机误删数据教程

    昨天帮室友的魅族mx3升级系统,结果不小心把他手机里的照片删了.但是自从flyme升级到3后,以前的U盘模式就改成了MTP模式,这样再连接电脑后就没办法用电脑上的数据恢复软件恢复数据了,因为压根就检测 ...

  3. 在微信浏览器中如何让他自动关闭当前页面回到会话框js

    <script type="text/javascript"> wx.config(jssdkconfig); require(['jquery', 'util'], ...

  4. Jquery的鼠标移动上去显示div，鼠标离开的时候隐藏div效果

    有时候我们需要这个效果:当鼠标放上去的时候显示一个div,当鼠标移走的时候就将div隐藏了.代码如下,记得引入Jquyer库.(当鼠标移动到id=menu的div上的时候,显示id=list的div, ...

  5. LinkIssue: Error 'LINK : fatal error LNK1123: failure during conversion to COFF: file invalid or cor

    参考:http://blog.csdn.net/junjiehe/article/details/16888197 使用VisualStudio 编译链接中可能出现如下错误: LINK : fatal ...

  6. java ---线程wait/notify/sleep/yield/join

    一.线程的状态 Java中线程中状态可分为五种:New(新建状态),Runnable(就绪状态),Running(运行状态),Blocked(阻塞状态),Dead(死亡状态). New:新建状态,当线 ...

  7. NYOJ题目114某种序列

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAscAAAHuCAIAAAD83zYaAAAgAElEQVR4nO3dP1LjygIv4LcJ5yyE2A

  8. NYOJ题目436sum of all integer numbers

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAr0AAAHKCAIAAACBiWRrAAAgAElEQVR4nO3dP1LjSts34G8T5CyEFB

  9. hdu 5018 Revenge of Fibonacci

    大水题 #include<time.h> #include <cstdio> #include <iostream> #include<algorithm&g ...

  10. PHP面向对象——异常处理

    Error_reporting(0);  //在网站正式上线的时候不准他报任何错误.  错误级别为不允许报错 Exception 是所有异常的基类. 测试并捕捉一个错误的例子:  class mysq ...