分享程序员开发的那些事...
更新时间：2023-12-03 21:26:58
这应该是你需要的。
.float-wrap {/ * 816 =< number of floats> *（< float width> + 2 *< float border width>）* / width：816px; border：1px solid; / *导致.float-wrap的高度匹配其子div * / 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>两个< / div> < div class =left-floater>三< / div> < div class =left-floater>我应该到< s>左< / s> 三的右侧< / div> < div class =left-floater>我浮。 < / div> < div class =left-floater>我浮。 < / div> < div class =left-floater>我浮。 < / div> < div class =left-floater>我浮。 < / div> < / div>< / div>
.float- wrap保持空间为 div 开放。因为它将始终保持至少足够的空间来保持它们并排，他们永远不需要包装。 .outer提供了一个滚动条，大小为窗口的宽度。
I've seen this asked a few times on SO, and the same answers are given which do not work on my end in Chrome or Firefox.
I want to make a set of left-floated divs run off, horizontally a parent div with a horizontal scroll bar.
I'm able to demonstrate what I want to do with this crappy inline css here: http://jsfiddle.net/ajkochanowicz/tSpLx/3/
However, from the answers given on SO*, this should work but does not on my end. http://jsfiddle.net/ajkochanowicz/tSpLx/2/
Is there a way to do this without defining absolute positioning for each item?
*e.g. Prevent floated divs from wrapping to next line
This should be all you need.
.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 keeps space open for the divs. Because it will always maintain at least enough space to keep them side-by-side, they'll never need to wrap. .outer provides a scroll bar, and sizes to the width of the window.