如何强制DIV比浏览器窗口更宽,以便水平地容纳它的子项,而不是强制它们在新行上
即。用小提琴考虑下面的代码。容器元素中有6个子元素,最小宽度为200px,并且都设置为float:left。当窗口调整得足够宽时,它们都在一行上。当它变窄时,它们开始推动新的行。理想情况下,我希望它们保持在一行并让浏览器显示滚动条。
http://jsfiddle.net/krippy2k/x8sDp/20/
.container {
}
.child-element {
min-width: 200px;
float: left;
height: 100px;
}
.child1 {
background-color: purple;
}
.child2 {
background-color: orange;
}
.child3 {
background-color: black;
}
.child4 {
background-color: green;
}
.child5 {
background-color: blue;
}
.child6 {
background-color: red;
}
<div class="container">
<div class="child-element child1"></div>
<div class="child-element child2"></div>
<div class="child-element child3"></div>
<div class="child-element child4"></div>
<div class="child-element child5"></div>
<div class="child-element child6"></div>
</div>
答案 0 :(得分:12)
您可以向父元素提供width
,否则您可以float: left;
使用display: inline-block;
和white-space: nowrap;
.container {
white-space: nowrap;
}
.child-element {
min-width: 200px;
display: inline-block;
height: 100px;
}
对于每个元素之间white-space
的{{1}},您可以使用4px
答案 1 :(得分:6)
不要浮动子项,而是将它们设置为内联块并在容器上设置white-space:nowrap
。
.container {
white-space:nowrap;
}
.child-element {
display:inline-block;
min-width: 200px;
height: 100px;
}
答案 2 :(得分:1)
只需将.container
设置为display:table
,将.child-elements
设置为display:table-cell
,然后从float:left
移除.child-element
:
.container {
display: table;
}
.child-element {
min-width: 200px;
display: table-cell;
height: 100px;
}
答案 3 :(得分:0)
为容器添加巨大的宽度
.container {
width: 999999px;
}
虽然我不确定为什么你会想要做这样的事情,从可用性/界面的角度来看。