html– 如何使div动态更改为内容宽度并使其保持宽度,即使浏览器窗口更改大小？

概述第一次在这里发帖我花了两天时间试图解决这个问题,最后决定在这里问一下.看看这个:(场景1)#container { height:150px; border:1px solid pink; width:1100px; } #widget { display:inline-block; width:100px;

第一次在这里发帖

我花了两天时间试图解决这个问题,最后决定在这里问一下.

看看这个:(场景1)

#container {    height:150px;    border:1px solID pink;    wIDth:1100px;}#Widget {    display:inline-block;    wIDth:100px;    height:100px;    background-color:red;}​

http://jsfiddle.net/DQFja/1/

非常简单.一个div,其中包含一堆其他div.父div的固定宽度为~1000像素,子div设置为显示：inline-block;当您使浏览器窗口小于父窗口时,会出现一个滚动条,您可以滚动查看其余部分.

现在来看看:(场景2)

#container {    height:150px;    border:1px solID pink;    float:left;}#Widget {    display:inline-block;    wIDth:100px;    height:100px;    background-color:red;}​

http://jsfiddle.net/zZRq7/

相同的父级和子级,但父级的宽度由您放入其中的div子项的数量动态确定.花花公子.但是,当您使浏览器窗口变小时,父div会变得像窗口一样宽,孩子们开始环绕,使父母更高(即使我们设置了固定的高度！)

所以：

如何在方案2中如何使父div以宽度动态,但是当浏览器窗口变小时,它还保持其形状/高度/宽度,以便我们可以获得滚动条？

最佳答案最小宽度是要走的路：

#container {    height:150px;    border:1px solID pink;    min-wIDth:1100px; // set the minimum wIDth of the container to 1100px    wIDth: 100%; // if the window size is bigger than 1100px,then make the container span the entire window}

查看实时示例here

编辑

一个Hacky方法实现的是使用如下的white-space属性：

#container {    border:1px solID pink;    white-space: nowrap;}#Widget {    display: inline-block;    wIDth:100px;    height:100px;    background-color:red;}​

查看实时示例here 总结

以上是内存溢出为你收集整理的html – 如何使div动态更改为内容宽度并使其保持宽度,即使浏览器窗口更改大小？全部内容，希望文章能够帮你解决html – 如何使div动态更改为内容宽度并使其保持宽度,即使浏览器窗口更改大小？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。