防止浮动的div包装到新行 [英] Prevent floated divs from wrapping to new line

查看:109
本文介绍了防止浮动的div包装到新行的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我已经看过这个问题几次在SO,和同样的答案给我不工作在我的结束在Chrome或Firefox。



我想使一组左浮动的div运行,水平地一个父div与一个水平滚动条。



我能够演示我想做什么crappy inline css here: http://jsfiddle.net/ajkochanowicz/tSpLx/3/



然而,从SO *给出的答案,这应该工作,但不在我的结束。
http://jsfiddle.net/ajkochanowicz/tSpLx/2/ p>

有没有办法做到这一点,而无需为每个项目定义绝对定位?



*例如防止浮动div环绕到下一行

解决方案

这应该是你需要的。



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

这篇关于防止浮动的div包装到新行的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆