二列右列宽度自适应

fenseyidu · 发表于 2008-10-16 09:20:38

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

nangongruiyang · 发表于 2008-10-16 09:26:22

楼主大大的好人呀，我正要做一个这样子的页面，怎么感觉你就是为我写的

7815480 · 发表于 2008-10-16 16:35:10

多分享

ONEBOYS · 发表于 2008-10-16 16:44:30

LZ这个非常有问题。
1. 背景问题。删除background:red; 就能看出来，right的背景是覆盖整个X轴的。
2. 高度问题，如果右侧的高度够高，内容也够长，超过左侧高度时，会浮动到左列的下面。

ONEBOYS · 发表于 2008-10-16 16:49:05

1.第一种方法，网上流传比较广的方法。采用左列left浮动，右列不浮动，采用margin-left定位的方式。

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

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

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

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

ONEBOYS · 发表于 2008-10-16 16:50:34

第一种方法的3px bug可以另外解决。

fenseyidu · 发表于 2008-12-2 10:58:14

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

[[i] 本帖最后由 fenseyidu 于 2008-12-2 13:14 编辑 ]

xiaotian_s · 发表于 2008-12-2 11:10:35

能不能扩展一下,我想写一个左边和右边各有一个定宽的div,中间那个div自适应宽!

hx7248292 · 发表于 2008-12-2 11:37:59

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

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

bht314 · 发表于 2008-12-3 15:35:10

楼上的DIV写法似乎不合符语义了。
ID为Left的DIV按语义应该在content 之前的吧，现在放在后边去了。

hx7248292 · 发表于 2008-12-3 15:39:18

放在前面并不代表不符合语义吧,
我觉得这个就是XHTML跟table的区别.

当然这里的left只是个class name

bht314 · 发表于 2008-12-3 15:58:25

我想是有点不符合文档结构的，至少，因为你左边部分大多都是放导航，如果人家不用CSS看你的文档，那结构显然是不对的吧，因为他要看完内容部分，才看到你的导航。
用负边距的方式处理自适应问题，是不是都只能用这个办法来处理呢？
我看亚马逊的代码也是这样，他们把中间部分自适应的内容，放在左边和右边菜单之后。

hx7248292 · 发表于 2008-12-3 16:08:36

中间内容一般比较重要放在前面也是可以的.也符合搜索引擎的规则.
文档结构?没有人在看网页的时候去点右键看resouce吧.只有我们这些做前端的分析结构才会看.

这点应该不用太在意

lds626 · 发表于 2008-12-3 19:07:08

楼主解决了偶一个问题，谢谢啊！！！

hx7248292 · 发表于 2008-12-4 13:07:57

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

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

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

[[i] 本帖最后由 hx7248292 于 2008-12-4 13:10 编辑 ]

lijuan1230 · 发表于 2008-12-4 17:40:15

楼上各位有没考虑宽度自适应的同时，高度自适应呢。
一般文档末尾有footer
如果用position:absolute; 是不好控制footer居页面底部。
如果用宽度百分比，在2列其中一列可自动伸缩的情况如何处理呢？
不知道各位有没好的方法，请教..

109105236 · 发表于 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有点问题

fenseyidu · 发表于 2008-12-16 09:45:34

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

hemin007 · 发表于 2009-6-5 11:10:22

楼主，自适应和宽度100%是两码。

zhuangchengy · 发表于 2009-6-5 11:28:19

不过LZ的方法也不错的我去研究研究下

shellwayhe · 发表于 2009-6-6 01:18:56

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

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

zzxstr · 发表于 2009-8-18 13:45:27

感觉这一类的解决方法还是很多的，适合自己需要的就行了。

guiguzi83 · 发表于 2009-8-18 14:43:20

如果要在蓝色区域内有个层70%（蓝色区域的70%）的宽度，而且要在蓝色区域内居中，怎么解决呢？

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

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

可以用个小js

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

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

回复 9＃：代码优化了一下