找回密码
 注册

QQ登录

只需一步,快速开始

查看: 3535|回复: 12

[讨论] 娱乐一下三列等高

[复制链接]
发表于 2008-10-21 22:35:45 | 显示全部楼层 |阅读模式
以下内容首发个人博客,欢迎大家讨论,如果转载请注明转载的出处,谢谢!

强调说明:以下内容只是个人练手娱乐的东西,不是在任何项目中都可以用的东西,或者说是给自己一个学习的总结,一个思维思考的总结吧。然后关于下面的代码的问题呢,两个侧边的长度绝对不可以比内容区域要长,否则页面有问题。切记,如果你们在项目中使用了以下方法,产生的后果自负

前几天在森林群里看到彪在说一个两列等高的问题,提高有人是用边框来模拟的,感觉想法真的很奇特,不过后来想了一下,因为是用内容的边框来模拟侧边的背景色的,所以内容区(mainBox)域跟侧边(sideBar)之间的间隔就不好搞出来了。

当时想到了以下几个问题:
1、刚刚上面提到的,两列之间的间距问题
2、因为侧边(sideBar)是需要用定位才好控制到内容区域(mainBox)模拟出来的边框色上,但定位后就脱离浮动也就无法自适应高度了
3、也就是因为无法自适应高度,所以只能保证侧边区域(sideBar)内容要比内容区域(mainBox)内容要少,否则页面就乱了;当然可以用JS来重新定义一下高度,但这样的话,就失去了原本用CSS来实现等高的娱乐性质的想法
4、补充一点,侧边(sideBar)只能用背景颜色而不是背景图片

对于上面提到的几个问题,间距方面我想了一下,把边框色放到外面去,然后内容区域(mainBox)跟整体的大的容器有一点间距,这样就有了。侧边(sideBar)还是通过定位,但侧边还是不能比内容区域(mainBox)高,不然,呵呵……

PS:刚刚说到娱乐性质的想法,我这样说是因为等高这个东西在实际运用中相对就比较少,而且真要实现的话,还是用JS比较方便。或许很多朋友说可以用margin-bottom:-9999px;padding-bottom:9999px;这样来实现啊,对,这个方法是可以实现等高,但这个方法也是会带来几个问题的,这个就不在这里废话了。

XHTML结构:
  1. div class="header"></div>
  2. <div class="content">
  3.         <div class="mainBox"></div>
  4.         <div class="sideBar1"></div>
  5.         <div class="sideBar2"></div>
  6. </div>
  7. <div class="footer"></div>
复制代码


CSS样式:
  1. * {margin:0;padding:0;}
  2. .header, .footer {width:900px;height:50px;margin:0 auto;background:#E5E5E5;}
  3. .content {position:relative;width:600px;margin:10px auto;border-left:170px solid #333333;border-right:130px solid #CCCCCC;}
  4. .mainBox {width:580px;margin-left:10px;overflow:hidden;background:#F4F4F4;}
  5. .sideBar1 {position:absolute;top:0;right:-130px;width:130px;}
  6. .sideBar2 {position:absolute;top:0;left:-170px;width:170px;color:#FFFFFF;}
复制代码


效果查看:

 提示:您可以先修改部分代码再运行



小结一下,CSS这个东西,实现的方法真的有很多,主要还是因为自己想不到,这个如果不是当时在群里看到的话,估计我自己还不知道。所以今天利用一点时间来记录一下,并将当时说到的两列变三列来玩。
发表于 2008-10-22 00:38:58 | 显示全部楼层
恩.CSS这东西其实创意无限,呵呵
回复 支持 反对

使用道具 举报

发表于 2008-10-22 01:03:56 | 显示全部楼层
恩  很久前看到过 顶一下。。。。 border!!
回复 支持 反对

使用道具 举报

发表于 2008-10-22 09:11:31 | 显示全部楼层
呵呵,看来主要解决了原来背景模拟等高法中,浮动导致中间列不可以高于侧列的问题。
But, border的确还是个问题。

So,的确是仅供娱乐。

[[i] 本帖最后由 ONEBOYS 于 2008-10-22 09:15 编辑 ]
回复 支持 反对

使用道具 举报

发表于 2008-10-28 13:46:13 | 显示全部楼层
这个方法的后果两边采用绝对定位,脱离文档流,即使比中间高,也无法撑开content
回复 支持 反对

使用道具 举报

发表于 2008-10-28 14:04:41 | 显示全部楼层
用border来搞 哈哈 有意思··
回复 支持 反对

使用道具 举报

发表于 2008-10-28 15:45:41 | 显示全部楼层

 提示:您可以先修改部分代码再运行

回复 支持 反对

使用道具 举报

发表于 2008-10-29 16:53:21 | 显示全部楼层
学习了~~~  
回复 支持 反对

使用道具 举报

发表于 2008-10-30 11:25:01 | 显示全部楼层
同样的结构,楼主用浮动来做,练习练习!
回复 支持 反对

使用道具 举报

发表于 2008-10-30 13:13:34 | 显示全部楼层

回复 5# NTTDoCoMo 的帖子

哈哈,没仔细看,原来是有这么个问题。。。

背景模拟法中中间列不能高于侧列,
而这里侧列却不能高于中间列。呵呵。。。

重在开拓思路.
回复 支持 反对

使用道具 举报

发表于 2008-12-2 14:21:25 | 显示全部楼层
回复 支持 反对

使用道具 举报

发表于 2008-12-2 15:09:16 | 显示全部楼层
就目前所发现的 最实用的还是用1px高的背景
回复 支持 反对

使用道具 举报

发表于 2008-12-2 16:15:42 | 显示全部楼层
用table做了一个试试:

 提示:您可以先修改部分代码再运行

回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备19000417号-2 )

GMT+8, 2021-10-27 08:58 , Processed in 0.066197 second(s), 10 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表