<!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. nyoj130 相同的雪花

    相同的雪花 时间限制:1000 ms  |  内存限制:65535 KB 难度:4   描述 You may have heard that no two snowflakes are alike. ...

  2. 【python】利用pathlib遍历目录Path().rglob

    来源:https://docs.python.org/3/library/pathlib.html 可以用pathlib模块中的Path().rglob来递归遍历文件 from pathlib imp ...

  3. python学习 登陆验证

    #!/usr/bin/env python #-*- coding=utf-8 -*- #----------------导入模块------------------------------ impo ...

  4. 无法定位序数4369于动态链接库libeay32.dll

    c:\windows\system32目录下应该有libeay32.dll,可能它过于陈旧,需要换一个新版本的libeay32.dll

  5. [Android Pro] Android API 23中废弃了HttpClient的解决办法

    reference to : http://blog.csdn.net/hbwindy/article/details/51326019 reference to : http://blog.csdn ...

  6. cookie的设置、获取以及删除

    首先介绍一下cookie的基本信息: cookie是以域为单位的,它必须放在服务器的的环境下,但是cookie的容量小,只有4kb,并且也不安全,还有入股cookie的名字相同,会修改或者覆盖原来的值 ...

  7. Android Service 与 IntentService

    Service 中的耗时操作必须 在 Thread中进行: IntentService 则直接在 onHandleIntent()方法中进行

  8. mac版的PS和DW破解版安装

    到网上找到破解版的安装文件,一般是一个dmg安装文件,和一个补丁文件,安装的时候,要先断网,然后点击软件,选试用安装,安装完毕后,不要打开软件,直接关闭掉,然后到应用程序里找到软件图标,右击打开包文件 ...

  9. iOS开发Xcode7真机调试教程

    从Xcode7开始,Xcode 不需要$99/$299升级开发者直接可以进行真机调试 调试步骤 1.假设已经你已经有了苹果账号,下载并安装好了Xcode7 2. 打开Xcode-> Prefer ...

  10. Delphi之DLL知识学习4---创建DLL

    下面是在Delphi中创建一个DLL的全过程,你将看到怎样创建一个接口单元,使之可以被其他的应用程序访问.并且将学会怎么把Delphi的窗体加入DLL中. 一.数美分:一个简单的DLL 下面是包含一个 ...