Question

看看这个:(情景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宽度动态变宽，但在浏览器窗口变小时保持其形状/高度/宽度，以便我们可以获得滚动条？

Answer 1

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

Answer 2

更新答案以包含空白行：

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

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

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

2 个答案: