<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. 『WPF』DataGrid的使用

    原文 『WPF』DataGrid的使用 几点说明 这里主要是参考了MSDN中关于DataGrid的说明 这里只会简单说明在WPF中,DataGird最简单的使用方法 对于MSDN中的翻译不会很详细,也 ...

  2. crm查询记录共享给了哪些人

    有时候,我们须要查询一个记录.共享给了哪些人?怎么做? 第一种做法:是sql的方式 select * from PrincipalObjectAccess where objectid = '5226 ...

  3. Swift - 单例模式的实现

    过去Swift要实现单例,无非是这三种方式:全局变量,内部变量和dispatch_once方式.但都略显繁琐. 后来从1.2版本起,Swift中添加了如 static let 和 static var ...

  4. PHP 页面跳转到另一个页面的几种方法分享

    如何在 PHP 中从一个页面重定向到另外一个页面呢?今天 清源 为大家列举出了三种办法,供大家来参考. 一.用HTTP头信息  也就是用PHP的HEADER函数.PHP里的HEADER函数的作用就是向 ...

  5. Windows Service的安装卸载 和 Service控制

    原文 Windows Service的安装卸载 和 Service控制 本文内容包括如何通过C#代码安装Windows Service(exe文件,并非打包后的安装文件).判断Service是否存在. ...

  6. Android中View绘制优化之一---- 优化布局层次

    本文原创, 转载请注明出处:http://blog.csdn.net/qinjuning 前言,竟然是翻译,当然得弄的有板有眼. 照着大作家格式来咯 , - - . 译序 最近一直在做锁屏界面,之前也 ...

  7. java 中通过label跳出双重for 循环

    java 中如何跳出双重for 循环 java跳出循环是使用break语句的,break默认跳出当前循环(包括for循环.while循环),当使用双层循环时,可通过label从内层循环跳出.有关对比的 ...

  8. javascript学习笔记--迭代函数

    概要 这里的迭代函数指的是对数组对象的操作方法,js数组共有五个迭代函数:every.fifter.forEach.map.some. 1.every every方法,返回值为Boolean类型,tr ...

  9. 使用TWebBrowser时存在内存泄漏问题的解决方案(使用SetProcessWorkingSetSize函数,或者修改OleCtrls.pas源码解决问题)

    用TWebBrower不断打开多个网页,多某些版本的操作系统上运行一段时间后,发现占用系统内存达几百M,直到关闭程序后,占用的内存才能释放. 这个问题在网有很多讨论,比较多人的建议办法是用SetPro ...

  10. 积累的VC编程小技巧之列表框

    1.列表框中标题栏(Column)的添加 创建一个List Control,其ID为IDC_LIST,在其Styles属性项下的View项里选择Report.Align项里选择Top.Sort项里选择 ...