纯CSS实现三列DIV等高布局

共有 46 位网友发表了评论　我要评论..

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就跑到下面去了 请管理员知道一下

a139268(59.49.*.*) 发表于：2011-05-30 03:26:33

我是Jack: 老师，我在学习的过程中发现了一个问题恩。而且貌似很多人都碰到同样的问题：关系到元素与元素之间的关系时，我经常犯混。例如：相对定位 绝对定位 浮动 坐标 内联 外联 什么display:block等等等。。。我建议老师给我们这些菜鸟整理一下。。 当然我知道老师的视频教程中有讲解，但看完以后都是一知半解阿。。老师~~~~求给力。。。。。

管理员回复：相对定位和绝对定位平时用的不多，浮动请查看css手册，块级元素和内联元素其实很好理解的，一个是块，一个不是

chocho(220.170.*.*) 发表于：2011-05-29 02:06:43

我是新手 请高手指点 overflow：hidden有隐藏和清浮的功能，清浮后，wrap的高度就包括子div的padding-bottom：10000px； 那么wrap隐藏是以什么为界限的呢 是以子div的内容为依据的吗

seoxiaobai(58.101.*.*) 发表于：2011-05-21 13:31:59

不错是不错的。呵呵。就是用DW在设计视图里面看。那就怪异咯。哈哈哈。不过做的很巧哈，学习了哈

xiachong1980(119.40.*.*) 发表于：2011-05-19 16:28:53

没看懂，为什么，，不理解

管理员回复：那就先不看了

TNT9413(59.33.*.*) 发表于：2011-03-25 17:37:35

妙！！！！！！！为这个问题苦思好久,终于知道解决发法了！ 特意注册个ID感谢一下

管理员回复：不客气，欢迎常来

blood(60.166.*.*) 发表于：2011-01-11 22:57:48

三列高度都把固定给个值 不也就都等高了

管理员回复：未知高度时

blood(60.166.*.*) 发表于：2011-01-11 22:30:49

把三列高都设置固定 不也就等高了

moicolin(113.31.*.*) 发表于：2010-12-27 10:00:08

这个好像一直有内补丁存在，怎么解决呀？

问2(113.111.*.*) 发表于：2010-09-17 14:43:31

我是2010-09-16 17:41:05 提问的. 谢谢管理员的回答。在你这学了不少。 可是问题是本来就是未知高度，我应该设多少好呢？如果10000不够。那就100万，1000万，1亿？？设太大的话，浏览器会不会崩溃？而且前面网友说的不支持opera。 看来还是放弃等高是王道。很多网站也不等高的。

管理员回复：其实最重要的是把网站的体验做上去，而不是一味追求技术

问(113.111.*.*) 发表于：2010-09-16 17:41:05

你好。我发现如果其中一列，非常的多内容的好。还是会不等高。

管理员回复：那就把样式表中的值再设置大一点

kevin(58.253.*.*) 发表于：2010-09-05 17:03:51

高!学习了。

haitaochou(116.205.*.*) 发表于：2010-08-04 11:30:13

opera不支持

管理员回复：那再找其它办法

binjjh(218.16.*.*) 发表于：2010-07-26 09:35:29

那如果我下面还有其他的层，用这句margin-bottom:-10000px; padding-bottom:10000px代码仍旧可以登高吗？

管理员回复：动手试下不就知道了

xiao1ye2(202.70.*.*) 发表于：2010-07-23 10:16:41

呵呵 才看懂拉. 谢谢! 问下 这是最长用的方法吗？

管理员回复：长用不长用我不知道，但是一种方法

liliyuanyang(113.66.*.*) 发表于：2010-07-12 09:51:14

那俺慢慢研究，这么点事情，还是有办法的。

liliyuanyang(113.64.*.*) 发表于：2010-07-11 15:17:07

管管，地球不是圆的，但地球仪是圆的，这个我能理解。只是仍然理解不了margin-bottom:-10000px; padding-bottom:10000px; 这样就能实现未知高度的等高。

管理员回复：那我没办法了

liliyuanyang(113.64.*.*) 发表于：2010-07-10 15:31:33

margin-bottom:-10000px; padding-bottom:10000px; 这样就能实现未知高度的等高，想了半天，理解不了，管管能再说详细一点吗

管理员回复：地球不是圆的，但地球仪是圆的，这你能理解吗

qiuzhijjcn(219.148.*.*) 发表于：2010-07-08 16:47:23

#left, #center, #right { height:1000px;} 既然这样可以，为什么大哥你还弄的那么复杂？是我理解错了？ 管理员回复：这样应该不行，我以为你问的是三个id写到一块这样可以不呢 这样可以吧，我试了试，在ie6 ie7都挺正常的

管理员回复：你这是设置三个高度都是1000了，当然等高了。我这里讲的是未知高度

ycookie(118.248.*.*) 发表于：2010-07-07 15:40:57

margin-bottom:-10000px; padding-bottom:10000px; 为什么这么做，就会等高呢，不太明白！

管理员回复：请查看之前的评论

qiuzhijjcn(219.148.*.*) 发表于：2010-07-07 11:05:45

#left, #center, #right { height:1000px;} 既然这样可以，为什么大哥你还弄的那么复杂？是我理解错了？

管理员回复：这样应该不行，我以为你问的是三个id写到一块这样可以不呢

qiuzhijjcn(219.148.*.*) 发表于：2010-07-06 17:39:38

#left, #center, #right { height:1000px;} 直接这样写不行吗？

管理员回复：可以

jj88661(222.72.*.*) 发表于：2010-07-06 14:56:35

站长你有没有看过那个叫960gs的一个框架？？http://960.gs/ 站长你看看，我不太懂

管理员回复：没看过

wingswu(122.96.*.*) 发表于：2010-06-22 11:18:27

非常感谢，这个解决方案很方便，很好。

管理员回复：顶

celian521(218.13.*.*) 发表于：2010-06-10 09:58:17

margin-bottom:-10000px; padding-bottom:10000px; 这一句用真是精髓所在！我得学学这种思路了

wfhcoco(59.174.*.*) 发表于：2010-06-08 19:13:29

太感谢了，解决了我纠结很久的问题...

1059026(115.152.*.*) 发表于：2010-06-03 16:06:38

试过了，好用，比用背景色实现自适用要简洁方便。

aleafo(221.3.*.*) 发表于：2010-06-02 15:48:28

以前看过，还是非常感谢楼主分享。顺便问下本站的.shtml页面用的什么语言，开发工具是什么，后台管理如何啊，期待回答~

管理员回复：.shtml页面用的就是html语言呀，后台管理和其它网站的后吧基本上一样的

violin0889(125.83.*.*) 发表于：2010-06-01 17:58:13

你好!我想给图片一个圆角的边框效果。图片大小可以自动。请问该怎么做？

管理员回复：那就把图片做成圆角的呀

yy2zmg(113.91.*.*) 发表于：2010-05-26 10:57:30

这个好是好，不过里面有一个致命缺点，就是如果网页内空多时，里面用到描点如：<a href="#top">点我</a>时，不会跳头部的，只会在#wrap { overflow:hidden; width:1000px; margin:0 auto; }这个层中出现。 不信 lz 你试试.. .还有你那会员登录验码换个色吧，差点看不到！

管理员回复：我这儿测试是会跳到顶部的

shrng11(60.178.*.*) 发表于：2010-05-25 19:23:34

采用一正一负很大的值，"使得目前两列的差距给忽略掉了" 这里的两列的差距给忽略掉了？是什么意思。。希望管理员帮忙解答下呢。。。 我看了这么多。。就#left, #center, #right { margin-bottom:-10000px; padding-bottom:10000px; }这段没看懂呢。。不理解你的那句话。。不好意思呢。。想好好学学。“隐藏容器溢出”、“正内补丁”和“负外补丁”有关这些的东西。忘管理员给个链接啊。。都解答下。。谢谢呢。

管理员回复：内补丁即为填充padding，外补丁指边距margin

abc(60.5.*.*) 发表于：2010-05-11 20:42:51

还有更好的办法吗？

管理员回复：你可以试试哟

aaa(218.242.*.*) 发表于：2010-04-28 16:58:16

IE6下不能显示

管理员回复：你是说什么不显示？

sanki(119.109.*.*) 发表于：2010-04-26 15:29:58

顶一下！！

jaying1986(123.130.*.*) 发表于：2010-04-16 13:06:07

这个不用隐藏容器溢出也可以吧。我删掉了看效果一样啊

dingjiechina(219.143.*.*) 发表于：2010-04-14 16:28:10

#left, #center, #right { margin-bottom:-10000px; padding-bottom:10000px; } 不知道这行代码什么意思。能不能解释一下

管理员回复：采用一正一负很大的值，使得目前两列的差距给忽略掉了

dingjiechina(219.143.*.*) 发表于：2010-04-14 16:26:21

很实用。。收藏 谢谢提供这么好的资料

管理员回复：不客气

meihuakai(60.190.*.*) 发表于：2010-04-07 08:37:51

这个挺不错的，顶。

管理员回复：我也顶

aspdoor(123.118.*.*) 发表于：2010-04-05 17:43:26

不错，学习了

chujay(123.146.*.*) 发表于：2010-04-03 16:40:28

一直在用<table>架构网页，确实有太多的不便。 不过现在也一心想把DIV+CSS好好补补。 管理员介绍的这个也正是我一直在找的，不错。支持下！

cz5757124(125.66.*.*) 发表于：2010-03-22 09:28:16

margin-bottom:-10000px; padding-bottom:10000px;这个是“正内补丁”和“负外补丁”？实际意义是什么呢？ 提点对网站的建议：1.比如我现在要留言，登录后却没有返回到之前的页面，找起来不方便。2.粘贴复制后出现的文章出处，多少有点烦人，请管理员想个更好的推广解决方法吧。 就这些了，管理员很热心，一个人不容易，支持个。

管理员回复：其实它的意见在这个值很大，这样会把原本高度的差别给忽略掉了。1、因为是在新窗口打开，所以就没有跳回之前页面，登录后把会员中心页面关掉，在原来页面上刷新即可。不过你的建议可以考虑。2、粘贴时加出处是为了那些直接复制本站的网站上留下出处，方便有问题的朋友找到提问的地方

前尘后世(123.89.*.*) 发表于：2010-03-21 17:03:33

这个很好！

管理员回复：顶