有时候为了让网页实现美观,在不知道高度的情况下,我们要用css实现等高布局效果,传统的方法,
我们可以用javascript实现,但是由于需求决定或者其他的情况下,我们只能用css实现,其方法主要是采用
“隐藏容器溢出”、"正内补丁"和"负外补丁"结合的方法实现的.

代码如下:

<div id="wrap">
  <div id="left">
    <p>left</p>
    <p>left</p>
    <p>left</p>
    <p>left</p>
    <p>left</p>
  </div>
  <div id="center">
    <p>center</p>
    ……(20个或更多个)
    <p>center</p>
  </div>
  <div id="right">
    <p>right</p>
    <p>right</p>
    <p>right</p>
  </div>
</div>

css样式如下:
<style>
      * {margin:0;padding:0;}
      #wrap { width:1000px; margin:0 auto; overflow:hidden;}
  #left, #center, #right { margin-bottom:-10000px; padding-bottom:10000px;}
  #left { float:left; width:250px; background:#00FFFF;}
  #center { float:left; width:500px; background:#FF0000;}
  #right { float:right; width:250px; background:#00FF00;}
</style>

其中的 10000px 可以修改为其他值,但不能小于最高列的高度。 经测试,此方法兼容 IE6/IE7/IE8 beta 2/FF/Opera/Chrome 。 方法很简单吧。从这里可以看出:看似简单的 CSS,其实并不简单。

如何用css实现"等高布局"。的更多相关文章

  1. css实现等高布局 两栏自适应布局 三栏自适应布局

    等高布局: HTML结构如下: <div class="wrapper"> <div class="box"> <h1>.. ...

  2. 【CSS】等高布局

    1. 负margin:   margin-bottom:-3000px; padding-bottom:3000px; 再配合父标签的overflow:hidden属性即可实现高度自动相等的效果.   ...

  3. CSS 实现等高布局以及多行文本垂直居中

    将display属性设置为table-cell,具有table的特点. 1.同行等高. 2.宽度自动调节. 相当于表格是td, <style type="text/css"& ...

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

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

  5. css设置多列等高布局

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

  6. 关于css解决俩边等高的问题(等高布局)

    等高布局 前段时间公司需哦一个后台管理系统,左侧是导航栏,右侧是content区域.然厚刚开始用的是js 去控制的,但是当页面的椰蓉过长的时候,有与js单线程,加载比较慢,就会有那么一个过程,查找了很 ...

  7. 纯css实现div三列等高布局的最简单方法简化版/也可以多列

    使用正padding和负margin对冲实现多列布局方法 这种方法很简单,就是在所有列中使用正的上.下padding和负的上.下margin,并在所有列外面加上一个容器,并设置overflow:hid ...

  8. CSS技巧 (2) · 多列等高布局

    前言  最近,面试的时候都碰到一些关于利用CSS实现多列等高布局或者一侧宽度固定,另一侧宽度自适应的问题,下面稍微总结一下: 先看一道题目 巧妙的多列等高布局 规定下面的布局,实现多列等高布局,要求两 ...

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

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

随机推荐

  1. Is the “*apply” family really not vectorized?

    Question: So we are used to say to every R new user that "apply isn't vectorized, check out the ...

  2. LyX快捷键管理

    快捷键修改:Tools->Preference->Editing->Shortcuts:修改后要Tools->Reconfig生效 快捷键默认保存文件:%appdata%\Ly ...

  3. 阿里SopHix热修复框架

    2015年以来,Android开发领域里对热修复技术的讨论和分享越来越多,同时也出现了一些不同的解决方案,如QQ空间补丁方案.阿里AndFix以及微信Tinker(Bugly sdk也集成Tikner ...

  4. 洗礼灵魂,修炼python(34)--面向对象编程(4)—继承

    前面已经说到面向对象编程有封装,继承,多态三大特性,那么其中的继承则很重要,可以直接单独的拿出来解析 继承 1.什么是继承: 字面意是子女继承父母的家产或者特性等.而在编程里继承是指子类继承父类(基类 ...

  5. Dbvisualizer软件设置SQL语句的自动提示功能

    之前从来没有使用过Dbvisualizer软件,用起来之后发现比mysqlfront不是好一点.之前一直不知道sql语句的自动提示功能,只能一个个单词输入,而且不是默认设置.之后在网上找到了怎么设置, ...

  6. python第三十一天-----类的封装、继承,多态.....

    封装 封装最好理解了.封装是面向对象的特征之一,是对象和类概念的主要特性. 封装,也就是把客观事物封装成抽象的类,并且类可以把自己的数据和方法只让可信的类或者对象操作,对不可信的进行信息隐藏. cla ...

  7. MIME 内容类型

    MIME内容类型 https://www.iana.org/assignments/media-types/media-types.xhtml 媒体在各浏览器的支持情况: https://develo ...

  8. python TCP socket套接字编程以及注意事项

    TCPServer.py #coding:utf-8 import socket #s 等待链接 #c 实时通讯 s = socket.socket(socket.AF_INET,socket.SOC ...

  9. 使用Python语言理解递归

    递归 一个函数在执行过程中一次或多次调用其本身便是递归,就像是俄罗斯套娃一样,一个娃娃里包含另一个娃娃. 递归其实是程序设计语言学习过程中很快就会接触到的东西,但有关递归的理解可能还会有一些遗漏,下面 ...

  10. s面向对象的写法

    js面向对象的写法 一.在html中引入该js文件,使用时: <script> var BuyBw8Product = new buyBw8Product(); </script&g ...