5

看看这个：（场景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 开始环绕，使父 div 更高（即使我们设置了固定高度！）

如何div像场景 2 一样使父级的宽度都动态化，但是当浏览器窗口变小时也保持其形状/高度/宽度，以便我们可以获得滚动条？

4

2 回答 2

8

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
}

在这里查看一个活生生的例子。

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

#container {
    border:1px solid pink;
    white-space: nowrap;
}
#widget {
    display: inline-block;
    width:100px;
    height:100px;
    background-color:red;
}​

在此处查看实时示例

于 2012-11-14T22:16:46.810 回答
2

更新答案以包括空白行：

#container {
    height:150px;
    border:1px solid pink;
    white-space:nowrap;
    overflow:auto;
}

http://jsfiddle.net/DQFja/3/

于 2012-11-14T22:14:30.563 回答