经典论坛 › 论坛 › 网站开发区 › HTML5及WEB标准化专栏 › 娱乐一下三列等高

查看: 1679|回复: 12

[讨论] 娱乐一下三列等高 [复制链接]

phantom　楼主

林小志

荣誉管理 

帖子: 2439
体力: 3085
威望: 25
居住地: 上海市长宁区

发表于 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结构：

div class="header"></div>
<div class="content">
<div class="mainBox"></div>
<div class="sideBar1"></div>
<div class="sideBar2"></div>
</div>
<div class="footer"></div>

复制代码

CSS样式：

* {margin:0;padding:0;}
.header, .footer {width:900px;height:50px;margin:0 auto;background:#E5E5E5;}
.content {position:relative;width:600px;margin:10px auto;border-left:170px solid #333333;border-right:130px solid #CCCCCC;}
.mainBox {width:580px;margin-left:10px;overflow:hidden;background:#F4F4F4;}
.sideBar1 {position:absolute;top:0;right:-130px;width:130px;}
.sideBar2 {position:absolute;top:0;left:-170px;width:170px;color:#FFFFFF;}

复制代码

效果查看：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
* {margin:0;padding:0;}
.header, .footer {width:900px;height:50px;margin:0 auto;background:#E5E5E5;}
.content {position:relative;width:600px;margin:10px auto;border-left:170px solid #333333;border-right:130px solid #CCCCCC;}
.mainBox {width:580px;margin-left:10px;overflow:hidden;background:#F4F4F4;}
.sideBar1 {position:absolute;top:0;right:-130px;width:130px;}
.sideBar2 {position:absolute;top:0;left:-170px;width:170px;color:#FFFFFF;}
</style>

<title>无标题文档</title>
</head>

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

小结一下，CSS这个东西，实现的方法真的有很多，主要还是因为自己想不到，这个如果不是当时在群里看到的话，估计我自己还不知道。所以今天利用一点时间来记录一下，并将当时说到的两列变三列来玩。

这里是可以点击的，你会点吗？

西部数码顶级域名注册商39元抢注！

使用道具举报

ivershuo　

初级会员

帖子: 57
体力: 217
威望: 0

发表于 2008-10-22 00:38:58 |显示全部楼层

恩.CSS这东西其实创意无限,呵呵

租服务器，上51IDC | [长沙]招聘:PHP经理10K/WEB前端6K/PHP开发6K

使用道具举报

Elking　

银牌会员

帖子: 322
体力: 1234
威望: 0
居住地: 广东省广州市

发表于 2008-10-22 01:03:56 |显示全部楼层

恩很久前看到过顶一下。。。。 border！！

使用道具举报

ONEBOYS　

步舞之鹤

金牌会员 

帖子: 1859
体力: 4403
威望: 16
居住地: 浙江省杭州市

发表于 2008-10-22 09:11:31 |显示全部楼层

呵呵，看来主要解决了原来背景模拟等高法中，浮动导致中间列不可以高于侧列的问题。
But， border的确还是个问题。

So,的确是仅供娱乐。

[ 本帖最后由 ONEBOYS 于 2008-10-22 09:15 编辑 ]

使用道具举报

NTTDoCoMo　

高级会员 

帖子: 193
体力: 752
威望: 0
居住地: 广东省广州市

发表于 2008-10-28 13:46:13 |显示全部楼层

这个方法的后果两边采用绝对定位，脱离文档流，即使比中间高，也无法撑开content

http://nttdocomo.vicp.net

使用道具举报

chiyuderen　

amot

金牌会员

帖子: 1742
体力: 3938
威望: 0

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

用border来搞哈哈有意思··

朋友博客:flash教程&游戏开发

使用道具举报

feigege　

李惟

银牌会员 

帖子: 831
体力: 2115
威望: 0

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>无标题 1</title> 
<style type="text/css"> 
* {margin: 0; padding: 0;} 
body {margin:30px;font:14px/1.6em Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; } 
.main {overflow: hidden; width: 800px; margin: 0 auto;} 
.left {float: left; width: 250px; overflow: hidden; } 
.center {float:left; margin-left:5px; width:295px; } 
.right {float: right; width: 245px; overflow: hidden;} 
.bor_top { height:1px; background:#FB9D51; overflow:hidden; } 
.equal {padding-bottom: 32767px; margin-bottom: -32767px;} 
.box {background: #F5E2AF; border: 1px #FB9D51 solid; padding-left:10px; padding-right:10px;} 
.mt5 {margin-top: 5px;} 
</style> 
</head> 
<body> 
<div class="main"> 
<div class="left equal"> 
  <div class="box"> 
   <p>你相信这个左右等高的布局是纯的CSS写的吗？</p> 
  </div> 
  <div class="box mt5"> 
   <p>来测试一下吧？~！</p> 
  </div> 
  <div class="box mt5"> 
   <p>测试一下</p> 
  </div> 
<div class="equal mt5 box"> 
   <p>测试一下</p> 
   <p>测试一下</p> 
   <p>测试一下</p> 
   <p>测试一下</p> 
   <p>测试一下</p> 
   <p>测试一下</p> 
   <p>测试一下</p> 
   <p>测试一下</p> 
   <p>测试一下</p> 
   <p>测试一下</p> 
   <p>测试一下</p> 
   <p>测试一下</p> 
   <p>测试一下</p> 
   <p>测试一下</p> 
   <p>测试一下</p> 
   <p>测试一下</p> 
   <p>测试一下</p> 
   <p>测试一下</p> 
  </div> 
</div> 
  <div class="center equal"> 
  <div class="box"> 
   <p>不由得你不信，这个的确是纯CSS写的</p> 
  </div> 
  <div class="box mt5"> 
   <p>来测试一下吧？~！</p> 
  </div> 
  <div class="box mt5"> 
   <p>测试一下</p> 
  </div> 
<div class="equal mt5 box"> 
   <p>测试一下</p> 
   <p>测试一下</p> 
   <p>测试一下</p> 
   <p>测试一下</p> 
   <p>测试一下</p> 
   <p>测试一下</p> 
   <p>测试一下</p> 
   <p>测试一下</p> 
   <p>测试一下</p> 
  </div> 
</div> 
<div class="equal right"> 
  <div class="box"> 
   <p>测试一下</p> 
   <p>测试一下</p> 
  </div> 
  <div class="box mt5"> 
   <p>测试一下</p> 
   <p>测试一下</p> 
   <p>测试一下</p> 
  </div> 
  <div class="box mt5"> 
   <p>测试一下</p> 
   <p>测试一下</p> 
   <p>测试一下</p> 
   <p>测试一下</p> 
   <p>测试一下</p> 
   <p>测试一下</p> 
  </div> 
  <div class="equal mt5 box"> 
   <p>测试一下</p> 
   <p>测试一下</p> 
   <p>测试一下</p> 
  </div> 
</div> 
</div> 
<div class="main"><div class="left bor_top"></div><div class="center bor_top"></div><div class="right bor_top"></div></div> 
</body> 
</html>

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

乱炖：http://levi.cg.am

使用道具举报

zxwancao　

初级会员

帖子: 55
体力: 108
威望: 0
居住地: 广东省广州市

发表于 2008-10-29 16:53:21 |显示全部楼层

学习了~~~

使用道具举报

moolee　

中级会员

帖子: 121
体力: 519
威望: 0
居住地: 广东省广州市

发表于 2008-10-30 11:25:01 |显示全部楼层

同样的结构，楼主用浮动来做，练习练习！

html-css.cn

使用道具举报

ONEBOYS　

步舞之鹤

金牌会员 

帖子: 1859
体力: 4403
威望: 16
居住地: 浙江省杭州市

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

回复 5# NTTDoCoMo 的帖子

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

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

重在开拓思路.

使用道具举报

dseven　

ReKey

高级会员 

帖子: 262
体力: 784
威望: 1

发表于 2008-12-2 14:21:25 |显示全部楼层

http://bbs.blueidea.com/thread-2891151-1-1.html

使用道具举报

oivp　

痴儿

银牌会员 

帖子: 1451
体力: 1894
威望: 0

发表于 2008-12-2 15:09:16 |显示全部楼层

就目前所发现的最实用的还是用1px高的背景

无比巨大的理论威力、思想锋芒和战斗精神！

使用道具举报

marvellous　

金翅擘海

钻石会员

帖子: 16557
体力: 37145
威望: 143

发表于 2008-12-2 16:15:42 |显示全部楼层

用table做了一个试试：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>无标题 1</title> 
<style type="text/css"> 
* {margin: 0; padding: 0;} 
body {margin:30px;font:14px/1.6em Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }

td{background: #F5E2AF;width:250px;}
table{background:#ffffff;border:0;height:550px;}
</style> 
</head> 
<body> 
<table style="height:550px;background: #ffffff;" cellspacing="4" border="0"><tr><td style="width:250px;height:550px;"><table cellspacing="4" style="height:550px;" border="0"><tr><td><p>你相信这个左右等高的布局是纯的CSS写的吗？</p> </td></tr><tr><td><p>来测试一下吧？~！</p> </td></tr><tr><td><p>测试一下</p></td></tr><tr><td>   <p>测试一下</p> 
   <p>测试一下</p> 
   <p>测试一下</p> 
   <p>测试一下</p> 
   <p>测试一下</p> 
   <p>测试一下</p> 
   <p>测试一下</p> 
   <p>测试一下</p> 
   <p>测试一下</p> 
   <p>测试一下</p> 
   <p>测试一下</p> 
   <p>测试一下</p> 
   <p>测试一下</p> 
   <p>测试一下</p> 
   <p>测试一下</p> 
   <p>测试一下</p> 
   <p>测试一下</p> 
   <p>测试一下</p> </td></tr></table></td><td style="width:250px;height:550px;"><table style="height:550px;" cellspacing="4" border="0"><tr><td> <p>不由得你不信，这个的确是纯CSS写的</p></td></tr><tr><td> <p>来测试一下吧？~！</p></td></tr><tr><td><p>测试一下</p> 
</td></tr><tr><td> <p>测试一下</p> 
   <p>测试一下</p> 
   <p>测试一下</p> 
   <p>测试一下</p> 
   <p>测试一下</p> 
   <p>测试一下</p> 
   <p>测试一下</p> 
   <p>测试一下</p> 
   <p>测试一下</p> </td></tr></table></td><td style="width:250px;height:550px;"><table style="height:550px;" cellspacing="4" border="0"><tr><td><p>测试一下</p> 
   <p>测试一下</p> 
</td></tr><tr><td><p>测试一下</p><p>测试一下</p>  
   <p>测试一下</p> 
</td></tr><tr><td><p>测试一下</p><p>测试一下</p>  
   <p>测试一下</p><p>测试一下</p><p>测试一下</p>  
   <p>测试一下</p> <p>测试一下</p><p>测试一下</p>  
   <p>测试一下</p>  
</td></tr></table></td></tr></table>
</body> 
</html>

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

┏┯┓┏┯┓┏┯┓┏┯┓
┠知┨┠往┨┠观┨┠来┨
┗┷┛┗┷┛┗┷┛┗┷┛

使用道具举报

返回列表

Archiver|手机版|安久科技提供CDN|blueidea.com ( 京ICP备05002321号 )

GMT+8, 2012-2-11 19:45 , Processed in 0.091790 second(s), 10 queries , Gzip On, Memcache On.

Powered by Discuz! X2

		自动登录	找回密码
密码			注册

[讨论] 娱乐一下三列等高 [复制链接]

回复 5# NTTDoCoMo 的帖子

浏览过的帖子

浏览过的版块