找回密码
 注册

QQ登录

只需一步,快速开始

查看: 4058|回复: 22

[教程] 二列右列宽度自适应

[复制链接]
发表于 2008-10-16 09:20:38 | 显示全部楼层 |阅读模式

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

发表于 2008-10-16 09:26:22 | 显示全部楼层
楼主大大的好人呀,我正要做一个这样子的页面,怎么感觉你就是为我写的
回复 支持 反对

使用道具 举报

发表于 2008-10-16 16:35:10 | 显示全部楼层
多分享
回复 支持 反对

使用道具 举报

发表于 2008-10-16 16:44:30 | 显示全部楼层
LZ这个非常有问题。
1. 背景问题。删除background:red; 就能看出来,right的背景是覆盖整个X轴的。
2. 高度问题,如果右侧的高度够高,内容也够长,超过左侧高度时,会浮动到左列的下面。
回复 支持 反对

使用道具 举报

发表于 2008-10-16 16:49:05 | 显示全部楼层
1.第一种方法,网上流传比较广的方法。采用左列left浮动,右列不浮动,采用margin-left定位的方式。

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



2.第二种方法:采用左列向左浮动,右列绝对定位left。为解决ie6下右列不撑开问题,在右列中设置一元素右浮动。

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



这两种方法左列都是采用float:left的。除此之外,也可以设置左列绝对定位来实现。
回复 支持 反对

使用道具 举报

发表于 2008-10-16 16:50:34 | 显示全部楼层
第一种方法的3px bug可以另外解决。
回复 支持 反对

使用道具 举报

 楼主| 发表于 2008-12-2 10:58:14 | 显示全部楼层

可以用个小js

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


[[i] 本帖最后由 fenseyidu 于 2008-12-2 13:14 编辑 ]
回复 支持 反对

使用道具 举报

发表于 2008-12-2 11:10:35 | 显示全部楼层
能不能扩展一下,我想写一个左边和右边各有一个定宽的div,中间那个div自适应宽!
回复 支持 反对

使用道具 举报

发表于 2008-12-2 11:37:59 | 显示全部楼层
原帖由 [i]xiaotian_s 于 2008-12-2 11:10 发表
能不能扩展一下,我想写一个左边和右边各有一个定宽的div,中间那个div自适应宽!

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

回复 支持 反对

使用道具 举报

发表于 2008-12-3 15:35:10 | 显示全部楼层
楼上的DIV写法似乎不合符语义了。
ID为Left的DIV按语义应该在content 之前的吧,现在放在后边去了。
回复 支持 反对

使用道具 举报

发表于 2008-12-3 15:39:18 | 显示全部楼层
放在前面并不代表不符合语义吧,
我觉得这个就是XHTML跟table的区别.

当然这里的left只是个class name
回复 支持 反对

使用道具 举报

发表于 2008-12-3 15:58:25 | 显示全部楼层
我想是有点不符合文档结构的,至少,因为你左边部分大多都是放导航,如果人家不用CSS看你的文档,那结构显然是不对的吧,因为他要看完内容部分,才看到你的导航。
用负边距的方式处理自适应问题,是不是都只能用这个办法来处理呢?
我看亚马逊的代码也是这样,他们把中间部分自适应的内容,放在左边和右边菜单之后。
回复 支持 反对

使用道具 举报

发表于 2008-12-3 16:08:36 | 显示全部楼层
中间内容一般比较重要放在前面也是可以的.也符合搜索引擎的规则.
文档结构?没有人在看网页的时候去点右键看resouce吧.只有我们这些做前端的分析结构才会看.

这点应该不用太在意
回复 支持 反对

使用道具 举报

发表于 2008-12-3 19:07:08 | 显示全部楼层
楼主解决了偶一个问题,谢谢啊!!!
回复 支持 反对

使用道具 举报

发表于 2008-12-4 13:07:57 | 显示全部楼层
原帖由 [i]bht314 于 2008-12-3 15:58 发表
我想是有点不符合文档结构的,至少,因为你左边部分大多都是放导航,如果人家不用CSS看你的文档,那结构显然是不对的吧,因为他要看完内容部分,才看到你的导航。
用负边距的方式处理自适应问题,是不是都只能用这个 ...


按你要求改了下.这下总应该满意了吧.呵

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


[[i] 本帖最后由 hx7248292 于 2008-12-4 13:10 编辑 ]
回复 支持 反对

使用道具 举报

发表于 2008-12-4 17:40:15 | 显示全部楼层
楼上各位有没考虑宽度自适应的同时,高度自适应呢。
一般文档末尾有footer
如果用position:absolute; 是不好控制footer居页面底部。
如果用宽度百分比,在2列其中一列可自动伸缩的情况如何处理呢?
不知道各位有没好的方法,请教..
回复 支持 反对

使用道具 举报

发表于 2008-12-5 15:02:44 | 显示全部楼层
原帖由 [i]hx7248292 于 2008-12-2 11:37 发表

[html]
/*布局样式*/
.wrap{
        float:left;width:100%;
}
.wrap .content{
        margin:0 200px;       
}
.left{
        float:left; width:200px; margin-left:-100%
}
.right{
        float:left; width:200px; margin-le ...

IE6下left有点问题
回复 支持 反对

使用道具 举报

 楼主| 发表于 2008-12-16 09:45:34 | 显示全部楼层

这样就可以高度自适应了,哈哈~

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

回复 支持 反对

使用道具 举报

发表于 2009-6-5 11:10:22 | 显示全部楼层
楼主,自适应和宽度100%是两码。
回复 支持 反对

使用道具 举报

发表于 2009-6-5 11:28:19 | 显示全部楼层

我用的就是5楼的第一种方法

不过LZ的方法也不错的 我去研究研究下
回复 支持 反对

使用道具 举报

发表于 2009-6-6 01:18:56 | 显示全部楼层

回复 9#:代码优化了一下

三栏布局,中间自适应
只测试了ie6和ff,其他的大家帮忙测

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

回复 支持 反对

使用道具 举报

发表于 2009-8-18 13:45:27 | 显示全部楼层
感觉这一类的解决方法还是很多的,适合自己需要的就行了。
回复 支持 反对

使用道具 举报

发表于 2009-8-18 14:43:20 | 显示全部楼层
如果要在蓝色区域内有个层70%(蓝色区域的70%)的宽度,而且要在蓝色区域内居中,怎么解决呢?
回复 支持 反对

使用道具 举报

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

本版积分规则

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

GMT+8, 2021-2-28 21:21 , Processed in 0.069546 second(s), 10 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

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