我已经在SO上看到过几次这样的问题,同样的答案在我的Chrome或Firefox中也不起作用。
我想创建一组向左浮动的div,在水平方向上是一个带有水平滚动条的父div。
我可以在这里演示我想要用这个糟糕的内联css做什么:http://jsfiddle.net/ajkochanowicz/tSpLx/3/
然而,从SO*上给出的答案来看,这应该是可行的,但对我来说不是。http://jsfiddle.net/ajkochanowicz/tSpLx/2/
有没有办法在不为每个项目定义绝对定位的情况下做到这一点?
发布于 2012-03-13 21:57:14
这应该就是您需要的全部内容。
.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>
.div
- wrap为浮点保持空间开放。因为它将始终保持至少足够的空间来保持它们并排在一起,所以它们永远不需要包装。.outer提供了一个滚动条,并根据窗口的宽度调整大小。
发布于 2012-03-13 01:56:15
在具有绝对定位的元素周围使用第二个包装器。然后,您可以只浮动单个项目。
<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。
发布于 2019-03-10 20:43:14
这个问题在很久以前就被提出了,但在搜索引擎结果中仍然很突出。因此,我觉得添加一个新的答案仍然是有用的。现在还可以通过使用flexbox (它现在具有良好的浏览器支持)来实现所需的结果,而不需要为父对象设置固定的宽度。
使用示例中的类名(现在有点过时了,因为元素实际上不再是浮动的):
.float-wrap {
display: flex;
flex-wrap: nowrap;
}
.left-floater {
flex: 0 0 100px;
}
.outer {
overflow-x: auto
}
https://stackoverflow.com/questions/9672176
复制相似问题