it-swarm.com.ru

Предотвратите плавающие div от переноса на новую строку

Я видел это несколько раз на SO, и даются те же ответы, которые не работают на моем конце в Chrome или Firefox.

Я хочу, чтобы набор оставленных влево div-ов, горизонтальный родительский div с горизонтальной полосой прокрутки.

Я могу продемонстрировать, что я хочу сделать с этим вым встроенным CSS здесь: http://jsfiddle.net/ajkochanowicz/tSpLx/3/

Тем не менее, из ответов, приведенных на SO *, это должно работать, но не с моей стороны . http://jsfiddle.net/ajkochanowicz/tSpLx/2/

Есть ли способ сделать это без определения абсолютного позиционирования для каждого элемента?

*например. Предотвращение переноса плавающих элементов в следующую строку

19
Adam Grant

Это должно быть все, что вам нужно. 

    .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 предоставляет полосу прокрутки и размеры по ширине окна.

16
AaronSieb

Используйте вторую обертку вокруг элементов с абсолютным позиционированием. Тогда вы можете просто плавать отдельные предметы.

<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
Kory Sharp