关于用css设置div的宽度自适应问题

[zhaoyu0826]

我现在在学习div+css。刚刚学习到div宽度自适应，处于初级阶段。
我有个问题
<div style="width:80%">1111111</div> 这样的div是相对于整个浏览器80%宽度的,但是把浏览器宽度拉到最小里边的字就会没有了

<div style="width:950px">11111111</div> 这样的div定死了宽度。浏览器缩小它也不随着动，所以里边的字用户一直能看见，但是整个页面显的特别死

我这几天看淘宝的页面，发现他有的div宽度一开始是根据浏览器的宽度在变，但是当浏览器宽度缩小到一定程度的时候，div就定宽了，不再随着浏览器的宽度继续变窄了。我想问下，这样的div样式是怎么实现的。

希望各位大侠帮助

[Wings_JK]

CSS设置下min-width就行了吧

[zhaoyu0826]

[Quote=引用 1 楼 wings_jk 的回复:]
CSS设置下min-width就行了吧
[/Quote]

昨天试了试，貌似不行。。。

[WebAdvocate]

这个，应该是浮动实现的。
一个DIV浮动的时候，如果没有设置宽度或宽度为auto，那么宽度计算规则会遵守 Shrink-to-fit的规则，具体点儿说，宽度 = min(max(preferred minimum width, available width), preferred width)。

步骤：
1. 计算格式化内容时除了发生明确的换行外不发生换行的时首选宽度（preferred width），以及首选最小宽度（preferred minimum width），比如，尝试所有可能的换行。而CSS2.1没有定义精确的算法。
2. 其次，在这种情况下，找出可用宽度（available width），这个宽度为包含块减去“margin-left”、“border-left-width”、“padding-left”、“padding-right”、“border-right-width”、“margin-right”以及所有相关滚动条的宽度。

看一下W3C CSS2.1的标准就知道了：http://www.w3.org/TR/CSS2/visudet.html#float-width

请关注：【分享】说说标准系列目录
稍后，会和大家分享。

[Wings_JK]

你给那个div加上这个样式试试呢

{ width: 80%; height: 90px; min-width: 300px; background-color: Gray; }

[WebAdvocate]

- -！ 好像这样一开始不能适应浏览器的宽度哈……

[zhaoyu0826]

[Quote=引用 4 楼 wings_jk 的回复:]
你给那个div加上这个样式试试呢

CSS code
{ width: 80%; height: 90px; min-width: 300px; background-color: Gray; }
[/Quote]


我这么写的，确实没效果。。。浏览器是IE6，FF都不成，你那个我也试了。。也不成。。

{height:58px;background:url(image/background_header.gif) repeat-x; width:80%; margin:0px auto; min-width:960px;}

[zhaoyu0826]

[Quote=引用 3 楼 webadvocate 的回复:]
这个，应该是浮动实现的。
一个DIV浮动的时候，如果没有设置宽度或宽度为auto，那么宽度计算规则会遵守 Shrink-to-fit的规则，具体点儿说，宽度 = min(max(preferred minimum width, available width), preferred width)。

步骤：
1. 计算格式化内容时除了发生明确的换行外不发生换行的时首选宽度（preferre……
[/Quote]


能否给个实例~~跪求。。谢谢了。。。

[Wings_JK]

我这边测试除了IE6都通过。。IE6貌似不支持min-width，需要手动写JS实现

[zhaoyu0826]

[Quote=引用 8 楼 wings_jk 的回复:]
我这边测试除了IE6都通过。。IE6貌似不支持min-width，需要手动写JS实现
[/Quote]

我这如果加上一个float:none;FF就能用。但是IE6还是不成。。。我看淘宝那个都兼容。。。。难道他们是用JS写的？

[WebAdvocate]

[Quote=引用 7 楼 zhaoyu0826 的回复:]

引用 3 楼 webadvocate 的回复:
这个，应该是浮动实现的。
一个DIV浮动的时候，如果没有设置宽度或宽度为auto，那么宽度计算规则会遵守 Shrink-to-fit的规则，具体点儿说，宽度 = min(max(preferred minimum width, available width), preferred width)。

步骤：
1. 计算格式化内容时除了发生……
[/Quote]真不好意思，LZ，我那个说的是错的- -！
我刚看了看淘宝的页面，你是不是说的最上面那个灰色的条啊？

[zhaoyu0826]

对对，淘宝里边好多都是那样的div，各位大侠有啥高招吗~~小弟跪求啊~T.T

[Wings_JK]

那个首页最上面的div么。。那个是一个固定宽度的div额。。只不过后面有个div设成和它一个颜色的背景所以让你误以为它一开始随着浏览器宽度变化而缩短，最后到一定宽度又不变的。你可以用FF的firebug看他页面结构的

[f10218]

ie6下好像要用到expression定义下width.
width:expression((this.offsetWidth < 490) ? (this.width = 490 +'px') : true);

[zhaoyu0826]

谢谢三位大侠，我把你们方法揉在了一起

{height:58px;background:url(image/background_header.gif) repeat-x; width:80%; margin:0px auto; min-width:960px; float:none; *width:expression((this.offsetWidth < 960) ? (this.width = 960 +'px') : true); }

现在是我想要的那种效果了。而且ie6-8，FF,safari，chrome都兼容。谢谢你们。结贴给分~

[zhaoyu0826]

结了贴发现一问题，那么写了之后，ie6宽度小到960以下，确实固定宽度了，但是再拉回来，就一直是定宽了。。。这个有解吗。。。

[xinlan1022]

学习。

[Wings_JK]

可以在window.onResize事件去拿到浏览器宽度document.documentElement.clientWidth再进行判断处理

[zhaoyu0826]

等于还是要用js去做。。。5555555555555555555555555555