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

2010-07-16 04:17:53 4.9万阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

Chapter 4 Ripple-Based Control Technique Part I 本文介绍了DC-DC转换器的纹波控制技术，重点分析了迟滞控制、恒定开通时间控制、恒定关断时间控制等方案的工作原理及优缺点。纹波控制无需补偿网络，具有快速瞬态响应和结构简单的优势，特别适合电池供电应用。其中，恒定开通时间控制在轻载时能自动延长关断时间，实现伪定频工作；而恒定关断时间控制轻载效率较低。文章还讨论了纹波注入技术解决Boost转换器右半平面零点问题，并比较了不同控制方案在负载瞬态下的性能表现。最后指出基于纹波的控制技术在提高调节精度和降低EMI方面的改进方向。阅读详情

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

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

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

希望各位大侠帮助

...全文

6层高速PCB设计实战：BGA布局与阻抗匹配关键解析本文深入解析6层高速PCB设计中BGA布局与阻抗匹配的关键技术。通过实战经验分享，详细介绍了六层PCB层叠结构的选择与优化、BGA器件布局技巧、阻抗匹配的实战经验以及高速布线技巧，帮助工程师提升PCB设计水平，确保信号完整性和电源完整性。阅读详情

zhaoyu0826

CSS 61,117 成员 60,701 内容

+ 关注 + 加入社区

切换为时间正序

zhaoyu0826 2010-07-16

打赏
举报

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

Wings_JK 2010-07-16

打赏
举报

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

xinlan1022 2010-07-16

打赏
举报

学习。

zhaoyu0826 2010-07-16

打赏
举报

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

zhaoyu0826 2010-07-16

打赏
举报

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

{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都兼容。谢谢你们。结贴给分~

f10218 2010-07-16

打赏
举报

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

Wings_JK 2010-07-16

打赏
举报

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

zhaoyu0826 2010-07-16

打赏
举报

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

WebAdvocate 2010-07-16

打赏
举报

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

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

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

zhaoyu0826 2010-07-16

打赏
举报

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

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

Wings_JK 2010-07-16

打赏
举报

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

zhaoyu0826 2010-07-16

打赏
举报

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

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

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

zhaoyu0826 2010-07-16

打赏
举报

[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;}

WebAdvocate 2010-07-16

打赏
举报

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

Wings_JK 2010-07-16

打赏
举报

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

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

WebAdvocate 2010-07-16

打赏
举报

这个，应该是浮动实现的。
一个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

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

zhaoyu0826 2010-07-16

打赏
举报

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

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

Wings_JK 2010-07-16

打赏
举报

CSS设置下min-width就行了吧

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

相关推荐