防止浮动div换行

小编典典

防止浮动div换行

css

我已经在SO上看到了几次这样的问题，并且给出了相同的答案，但这些答案在我的Chrome或Firefox中不起作用。

我想让一组左浮动div开始运行，水平放置一个带有水平滚动条的父div。

我可以在这里演示如何使用此糟糕的嵌入式CSS
但是，从SO *给出的答案来看，这应该可行，但对我而言却不可行。

有没有一种方法可以定义每个项目的绝对位置呢？

eg [防止浮动的div包装到下一行

阅读 331

2020-05-16

共1个答案

小编典典

这应该是您所需要的。

    .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为divs
保留空间。因为它将始终至少保留足够的空间来使其并排放置，所以它们永远不需要包装。.outer提供滚动条，其大小与窗口的宽度相同。

2020-05-16