看看这个:(场景1)
#container {
height:150px;
border:1px solid pink;
width:1100px;
}
#widget {
display:inline-block;
width:100px;
height:100px;
background-color:red;
}
非常简单。一个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;
}
相同的父级和子级,但父级的宽度由您放入其中的div子项的数量动态确定。花花公子。但是,当您使浏览器窗口变小时,父div会变得像窗口一样宽,孩子们开始环绕,使父母更高(即使我们设置了固定的高度!)
如何在场景2中使父div
宽度动态,但是当浏览器窗口变小时,它还保持其形状/高度/宽度,以便我们可以获得滚动条?
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的实例
更新答案以包含空白行:
#container {
height:150px;
border:1px solid pink;
white-space:nowrap;
overflow:auto;
}