html – 防止浮动div被包装到新行

我已经看到这个在SO上问了几次，并给出了相同的答案，这在Chrome或者Firefox中是不行的。 @H_404_2@我想让一组左浮动的div运行，水平放置一个带有水平滚动条的父div。@H_502_3@ @H_404_2@我可以在这里证明我想用这个肮脏的inline css做什么：http://jsfiddle.net/ajkochanowicz/tSpLx/3/@H_502_3@ @H_404_2@但是，从SO *的答案来看，这应该是有效的，但不是在我的目的。
http://jsfiddle.net/ajkochanowicz/tSpLx/2/@H_502_3@ @H_404_2@有没有办法做到这一点，而不是定义每个项目的绝对定位？@H_502_3@ @H_404_2@*例如。 Prevent floated divs from wrapping to next line@H_502_3@

解决方法

这应该是你需要的。

.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>

@H_404_2@.float-wrap为div开放空间。因为它总是保持足够的空间来保持它们并排，所以它们永远不需要包装。 .outer提供一个滚动条，并将尺寸设置为窗口的宽度。@H_502_3@

html – 防止浮动div被包装到新行

解决方法

猜你在找的HTML相关文章