当前位置:首页 > DIV+CSS实例 > 正文

纯CSS实现三列DIV等高布局

作者:紫枫印象 来源:86ue.com 【 】 浏览: 添加日期:2010-03-17 我要评论(49)     

DIV等高布局,我想很多人都遇见过,我也看过不少的方法,有的是通过背景图片,实现假象的等高效果;
还有的用js实现等等。这些都是方法,但是现在都不用以上的方法,来个真正的纯css实现等高!

现在我们来看看真正的 CSS 实现的等高布局,其方法主要是采用“隐藏容器溢出”、“正内补丁”和“负外补丁”结合的方法实现的。 下面来看看实际的例子(三列等高),以下面的 XHTML 代码为例:

html代码:

<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>
    <p>center</p>
    <p>center</p>
    <p>center</p>
    <p>center</p>
    <p>center</p>
    <p>center</p>
    <p>center</p>
    <p>center</p>
    <p>center</p>
    <p>center</p>
    <p>center</p>
    <p>center</p>
    <p>center</p>
    <p>center</p>
    <p>center</p>
    <p>center</p>
    <p>center</p>
    <p>center</p>
    <p>center</p>
  </div>
  <div id="right">
    <p>right</p>
    <p>right</p>
    <p>right</p>
  </div>
</div>
 

css代码:

<style type="text/css">
body, p, ul { margin:0; padding:0; }
#wrap { overflow:hidden; width:1000px; margin:0 auto; }
#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; }


标准之路www.aa25.cn 提示:可以先修改部分代码后再运行

(如果您觉得本站不错,请告诉身边的朋友,或转载到论坛、百度知道、贴吧等,记得带网址哟,不胜感激!)

〖DIV+CSS实例〗Tags: 三列 等高 三列等高 等高布局 css等高布局

所属专题:网页技巧常用CSS技巧

更多评论(49)..会员评论

the7th(219.238.*.*) 发表于:2013-08-02 17:40:16
直接浮动就是,何必2个左浮动,1个右浮动呢
he429501203(172.16.*.*) 发表于:2013-04-11 10:22:59
若给left和right 加上边框,下边框就会显示不出,由于宽度定死,right也会掉到下面去。这方法很多情况下都不适用。当然,某些情况下偶尔还能派上用场。
maagee(118.67.*.*) 发表于:2012-09-05 12:16:35
如果左右列分别加不同的底部边框呢?该如何解决?
管理员回复:在样式中分别给left和right加上边框就可以了
qc0023(120.42.*.*) 发表于:2011-08-15 15:16:18
这个有个致命的缺点,设置left center right 任意一个如果设置了 PADDING 或MARGIN 的左右值就会冲突··造成页面错乱·
管理员回复:这个倒没试过
webLine(183.47.*.*) 发表于:2011-07-25 15:14:45
#wrap{ overflow:hidden; width:1000px; margin:0 auto; zoom:1; } 在ie6下,加上zoom:1;才正常
管理员回复:是的
chenhua1920(115.197.*.*) 发表于:2011-07-20 10:07:35
呵呵,ie6不行的哈,楼主加油解决兼容问题
cyly(116.113.*.*) 发表于:2011-07-08 22:17:58
你好我想请教一个问题,我有左中右三个大div,左侧div中包含两个小box div。 以下是相关css代码。可是我的代码在ie6中出现两个小BOX div明显高度不够。ff中中间的div跑到上边去了?怎么解决啊? #main #topmain #topmainleft { float: left; height: 492px; width: 295px; padding: 0px; margin-top: 5px; margin-right: 0px; margin-bottom: 3px; margin-left: 5px; _display: inline; } .sidebox1 { height: 241px; width: 295px; border: 1px solid #0000FF; padding: 0px; margin-top: 0px; margin-right: 0px; margin-left: 0px; background-color: #CCCCCC; margin-bottom: 8px; } .sidebox2 { height: 241px; width: 295px; border: 1px solid #0000FF; background-color: #00FFFF; } #main #topmain #topmaincenter { height: 492px; border: 1px solid #0000FF; margin-right: 258px; _margin-right: 255px; margin-left: 308px; _margin-left: 305px; margin-top: 5px; margin-bottom: 3px; padding: 0px; display: block; float: none; } #main #topmain #topmainright { float: right; height: 492px; width: 245px; border: 1px solid #0000FF; padding: 0px; margin-top: 5px; margin-right: 5px; margin-bottom: 3px; margin-left: 0px; _display: inline; }
管理员回复:看的头晕
luning(113.126.*.*) 发表于:2011-07-03 16:39:59
发现一个问题 设置left margin值的时候 right就跑到下面去了 请管理员知道一下

出差旅游免费预订酒店

【视频教程】新手常见问题