首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >防止浮动div换行到新行

防止浮动div换行到新行
EN

Stack Overflow用户
提问于 2012-03-13 01:50:22
回答 3查看 55.6K关注 0票数 19

我已经在SO上看到过几次这样的问题,同样的答案在我的Chrome或Firefox中也不起作用。

我想创建一组向左浮动的div,在水平方向上是一个带有水平滚动条的父div。

我可以在这里演示我想要用这个糟糕的内联css做什么:http://jsfiddle.net/ajkochanowicz/tSpLx/3/

然而,从SO*上给出的答案来看,这应该是可行的,但对我来说不是。http://jsfiddle.net/ajkochanowicz/tSpLx/2/

有没有办法在不为每个项目定义绝对定位的情况下做到这一点?

*例如Prevent floated divs from wrapping to next line

EN

回答 3

Stack Overflow用户

回答已采纳

发布于 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提供了一个滚动条,并根据窗口的宽度调整大小。

票数 16
EN

Stack Overflow用户

发布于 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。

票数 0
EN

Stack Overflow用户

发布于 2019-03-10 20:43:14

这个问题在很久以前就被提出了,但在搜索引擎结果中仍然很突出。因此,我觉得添加一个新的答案仍然是有用的。现在还可以通过使用flexbox (它现在具有良好的浏览器支持)来实现所需的结果,而不需要为父对象设置固定的宽度。

使用示例中的类名(现在有点过时了,因为元素实际上不再是浮动的):

.float-wrap {
  display: flex;
  flex-wrap: nowrap;
}

.left-floater {
  flex: 0 0 100px;
}

.outer {
  overflow-x: auto
}
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/9672176

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档