<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. <context-param>与<init-param>的区别与作用(转)

    <context-param>的作用:web.xml的配置中<context-param>配置作用1. 启动一个WEB项目的时候,容器(如:Tomcat)会去读它的配置文件we ...

  2. 基于visual Studio2013解决C语言竞赛题之1040因数分解

     题目 解决代码及点评 /* 将一个数M分解为质因数(M≠0). */ #include <stdio.h> #include <stdlib.h> void main() ...

  3. hdu2489 Minimal Ratio Tree

    hdu2489 Minimal Ratio Tree 题意:一个 至多  n=15 的 完全图 ,求 含有 m 个节点的树 使 边权和 除 点权和 最小 题解:枚举 m 个 点 ,然后 求 最小生成树 ...

  4. 如何使用NArrange进行代码优化

    Narrange是一个.NET代码管理工具.它可以对源代码自动进行美化和把类成员分成一个组.区域.目前支持C#.VB.NET,将来会支持更多.NET上的语言. 主要的作用是: ◆ 减少程序员的开发时间 ...

  5. Python 中的类的相关操作

    构造函数 构造函数是任何类都有的特殊方法.当要创建一个类时,就要调用构造函数.他的名字是__init__.init的前后分别是两个下划线.时间类Time的构造函数如下: >>> cl ...

  6. linux命令:使用man, 导出man

    要查一个命令怎么使用,使用"man 命令", eg: man find, man ls; "info 命令"貌似也可以看, info find, info ls ...

  7. Javascript做模糊查询

    <html> <head> <title>Javascript模糊查找</title> </head> <body> <l ...

  8. hibernate简单介绍

    1.   Hibernate是什么? hibernate是 轻量级的 ORM 框架. ORM全称object/relationmapping [对象/关系映射]. Hibernate主要用来实现Jav ...

  9. 【Android】 -- 使用UncaughtExceptionHandler捕捉全局异常

    在综合统计SDK(欧盟统计局的朋友,百度统计)之后.有一个非常有利的功能测试:错误分析.此功能可以在程序的执行中遇到崩溃(runtimeException)反馈给server,帮助开发者提高产品.多功 ...

  10. Swift - 系统声音服务的使用(播放声音,提醒,震动)

    1,系统声音服务介绍: 系统声音服务提供了一个Api,用于播放不超过30秒的声音.它支持的文件格式有限,具体的说只有CAF.AIF和使用PCM或IMA/ADPCM数据的WAV文件. 但此函数没有提供操 ...