<div id="main">
<div id="left">
我是左边的内容的啦啦啦啦。。。 。<br>
我是左边的内容的啦啦啦啦。。。。<br>
我是左边的内容的啦啦啦啦。。。。 <br>
我是左边的内容的啦啦啦啦。 。 。。<br>
我是左边的内容的啦啦啦啦。。。 。<br>
</div>
<div id="right">
左边的内容...哈哈哈哈哈
</div>
</div> <style>
#main{
overflow:hidden;
width:500px;
margin:0 auto;
}
#left{
float:left;
width:390px;
background:#eee;
}
#right{
float:right;
width:100px;
background:#ccc;
}
#left,#right{
margin-bottom:-1000px;
padding-bottom:1000px;
}
</style>

overflow:hidden;
margin-bottom:-1000px;
padding-bottom:1000px;

很巧妙的利用了 margin 做到了等高布局。。仅仅是一个看起来的。实际上高度不相等的。

仅仅是隐藏了超出的部分

margin 等高布局的更多相关文章

  1. CSS3中flexbox如何实现水平垂直居中和三列等高布局

    最近这些天都在弥补css以及css3的基础知识,在打开网页的时候,发现了火狐默认首页上有这样一个东西.

  2. CSS等高布局的6种方式

    × 目录 [1]边框模拟 [2]负margin [3]table[4]absolute[5]flex[6]js 前面的话 等高布局是指子元素在父元素中高度相等的布局方式.等高布局的实现包括伪等高和真等 ...

  3. div两栏等高布局

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  4. css圣杯布局、等高布局

    所谓圣杯布局,就是自适应浏览器的分辨率,也称双飞翼布局. 例子: <style> body{margin:0;} .center{height:600px;background:#f60; ...

  5. CSS display:table属性用法- 轻松实现了三栏等高布局

    display:table:此元素会作为块级表格来显示(类似 <table>); display:table-cell属性指让标签元素以表格单元格的形式呈现,类似于td标签.目前IE8+以 ...

  6. 模拟表格 inline-block等高布局

    表格是个好东西,它可以自动根据内容来调整格子,确保数据正常显示,并且不破坏表格的结构.但也有一些劣势,因为是用大量标签堆砌而成,页面结构会比较乱,细节也往往不容易控制.所以我们希望有表格的展示效果,但 ...

  7. css设置多列等高布局

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

  8. 如何用css实现"等高布局"。

    有时候为了让网页实现美观,在不知道高度的情况下,我们要用css实现等高布局效果,传统的方法, 我们可以用javascript实现,但是由于需求决定或者其他的情况下,我们只能用css实现,其方法主要是采 ...

  9. CSS等高布局的7种方式

    前面的话 等高布局是指子元素在父元素中高度相等的布局方式.等高布局的实现包括伪等高和真等高,伪等高只是看上去等高而已,真等高是实实在在的等高.本文将介绍边框模拟.负margin这两种伪等高以及tabl ...

随机推荐

  1. 新浪SAE快速上手教程

     新浪SAE快速上手教程[1]如何免费开通新浪云 2014-07-18 > 新浪SAE快速上手教程[2]如何创建.删除应用 2014-07-24 > 新浪SAE快速上手教程[3]如何上传应 ...

  2. 从M个数中随机选出N个数的所有组合,有序,(二)

    这就是数学中的 A m n 的选取. 共有   m!/n!种可能.. 同样举一个例子吧.. 从12345这五个数字中随机选取3个数字,要求选出来的这三个数字是有序,也就是说从12345中选出来的是12 ...

  3. new对象数组时的内存布局

    #include <iostream> #include <limits> using namespace std; #define SAFE_DELETE(x) \ { \ ...

  4. cocos2d-x游戏开发 跑酷(两) 物理世界

    原创.转载请注明出处:http://blog.csdn.net/dawn_moon/article/details/21240343 泰然的跑酷用的chipmunk物理引擎.我没有细致学过这个东西. ...

  5. STM8S EEPROM 操作

    STM8S 内置EEPROM,对于非常大须要带记忆的产品来说,是个非常好的资源,下面是我个人摸索出来的,而且验证OK,大家如须要可放心使用. #define EEPROMADDR0X000 ((u32 ...

  6. 第三天学习内容 if--else

    using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Threa ...

  7. Windows下用Mingw编译Boost.Regex库

    下载Boost库,解压. 定位到regex库文件夹下. GCC所对应的MAKEFILE为gcc.mak 进入命令提示符下,输入make -f gcc.mak 这是如果直接按回车执行的话,会出现错误: ...

  8. Linux下套接字具体解释(三)----几种套接字I/O模型

    參考: 网络编程–IO模型演示样例 几种server端IO模型的简介及实现 背景知识 堵塞和非堵塞 对于一个套接字的 I/O通信,它会涉及到两个系统对象.一个是调用这个IO的进程或者线程,还有一个就是 ...

  9. 在tornado中使用celery实现异步任务处理之中的一个

    一.简单介绍 tornado-celery是用于Tornado web框架的非堵塞 celeryclient. 通过tornado-celery能够将耗时任务增加到任务队列中处理, 在celery中创 ...

  10. 五种情况下会刷新控件状态(刷新所有子FWinControls的显示)——从DFM读取数据时、新增加子控件时、重新创建当前控件的句柄时、设置父控件时、显示状态被改变时

    五种情况下会刷新控件状态(刷新控件状态才能刷新所有子FWinControls的显示): 在TWinControls.PaintControls中,对所有FWinControls只是重绘了边框,而没有整 ...