看看这个：（场景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设置为display: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 会变得与窗口一样宽，并且子级开始环绕，从而使父级更高（即使我们设置了固定高度！）
我该如何让父母div与场景 2 一样，宽度都是动态的，但当浏览器窗口变小时，也保持其形状/高度/宽度，以便我们可以获得滚动条？
Min-width是要走的路：
#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
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
