我已经在SO上看过几次这样的问题,并且给出了相同的答案,这些答案在Chrome或Firefox中无效。
我想让一组左浮动的div运行,水平的父div与水平滚动条。
我能够在这里展示我想用这个糟糕的内联css做什么:http://jsfiddle.net/ajkochanowicz/tSpLx/3/
但是,根据SO *给出的答案,这应该有效,但不是我的结论。 http://jsfiddle.net/ajkochanowicz/tSpLx/2/
有没有办法在不定义每个项目的绝对定位的情况下做到这一点?
这应该是你所需要的。
.float-wrap {
/* 816 = <number of floats> * (<float width> + 2 * <float border width>) */
width: 816px;
border: 1px solid;
/* causes .float-wrap's height to match its child divs */
overflow: auto;
}
.left-floater {
width: 100px;
height: 100px;
border: 1px solid;
float: left;
}
.outer {
overflow-x: scroll;
}
<div class="outer">
<div class="float-wrap">
<div class="left-floater">
One
</div>
<div class="left-floater">
Two
</div>
<div class="left-floater">
Three
</div>
<div class="left-floater">
I should be to the <s>left</s> right of "Three"
</div>
<div class="left-floater">
I float.
</div>
<div class="left-floater">
I float.
</div>
<div class="left-floater">
I float.
</div>
<div class="left-floater">
I float.
</div>
</div>
</div>
.float-wrap为div
s保持空间开放。因为它总是保持至少足够的空间来保持它们并排,所以它们永远不需要包裹。 .outer提供滚动条,大小与窗口的宽度相同。
使用绝对定位的元素周围的第二个包装。然后你可以浮动单个项目。
<style type="text/css">
#outter {
position: relative;
width: 500px;
height: 200px;
overflow: scroll;
}
#inner {
position: absolute;
top: 0;
left: 0;
width: 1000px;
height: 200px;
}
#inner .item {
float: left;
display: inline;
}
</style>
<div id="outter">
<div id="inner">
<div class="item">Item #1</div>
<div class="item">Item #2</div>
<div class="item">Item #3</div>
</div>
</div>
你必须根据你里面的物品数量来调整#inner的宽度。如果您知道项目数或在页面加载后使用javascript,则可以在加载时完成此操作。
这个问题已经被问过很久了,但仍然在搜索引擎结果中显得很高。因此,我觉得添加新答案仍然有用。现在也可以通过使用flexbox(现在具有良好的浏览器支持)为父母设置固定宽度来实现所需的结果。
使用示例中的类名(由于元素实际上不再浮动,因此现在有点关闭):
.float-wrap {
display: flex;
flex-wrap: nowrap;
}
.left-floater {
flex: 0 0 100px;
}
.outer {
overflow-x: auto
}