<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. WM_PAINT消息在窗口重绘的时候产生,那什么时候窗口会重绘(异步工作方式效率高、灵活性强,还有UpdateWindow和RedrawWindow帮忙)

    Q:wm_paint消息在窗口重绘的时候产生,那什么时候窗口会重绘?? A: 严格地说,只有当收到WM_PAINT消息后窗口会重绘 但是引起这个消息的事件有很多, 比如:1.首次创建 2.移动 3.改 ...

  2. UVA10006 - Carmichael Numbers

    题目链接:UVA10006 本来想直接打素数表,然后根据素数表来判断,结果一直超时,后来把素数表去掉,再在for循环中加判断才勉强过了. Some numbers that are not prime ...

  3. 在SharePoint 2013 中使用文档库Scheduling (计划公布功能)

    本文讲述在SharePoint2013 中使用文档库Scheduling (计划公布功能)的步骤和注意的事项. 文档库Scheduling (计划公布功能) 用于设定当文档通过审批后特定的时间区间内才 ...

  4. 真机測试时的错误:No matching provisioning profiles found

    1.出现错误的原因是这种---- 公司接收一个外包项目,原来做真机測试的时候,用的是公司申请的苹果开发人员账号.如今项目结束了,准备上线,但客户要求使用客户自己的苹果开发人员是账号上线,于是就用客户的 ...

  5. 解 自己关于 C# Button的Click事件的疑惑

    先说说C#中事件的用法,从事件的用法中,我自己会产生一个疑惑 C#事件 class Program { static void Main(string[] args) { EventClass ec ...

  6. bootbox api

    bootbox是boostrap集成的弹窗,基本能完成后台系统的需求,下面是一些使用方法 1.bootbox.alert bootbox.alert使用方法主要有三种 直接传内容 bootbox.al ...

  7. Linux环境下使用eclipse开发C++动态链接库程序

    Linux中也有类似windows中DLL的变成方法,只不过名称不同而已.在Linux中,动态链接叫做Standard Object,生成的动态链接文件为*.so.详细请参考相关文档. 开发环境:Ec ...

  8. Java批量生成Mac地址到文件

    public class Main { public static void main(String[] args) { // 生成文件名称 String filePath = "mac.t ...

  9. 软考之路(四)---软件project一 概念模型,逻辑模型,物理模型

    自从接触到数据库到如今这三个概念大家理解的还有些不清楚,今天来为大家解答疑惑,共同提高,结合生活理解 概念模型        概念模型就是在了解了用户的需求,用户的业务领域工作情况以后,经过分析和总结 ...

  10. TestNg JAVA 自动化单元测试框架Demo

    TestNg TestNg 是java的一个自动化单元测试框架 参考:http://testng.org/doc/index.html 环境准备 既然是java 的自动化单元测试框架,就必须要有jav ...