我已经看到这个在SO上问了几次,并给出了相同的答案,这在Chrome或者Firefox中是不行的。
我想让一组左浮动的div运行,水平放置一个带有水平滚动条的父div。
我可以在这里证明我想用这个肮脏的inline 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开放空间。因为它总是保持足够的空间来保持它们并排,所以它们永远不需要包装。 .outer提供一个滚动条,并将尺寸设置为窗口的宽度。