Предотвратить перемещение div-ов из упаковки в новую строку

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

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

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

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

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

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

Ответы

Ответ 1

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

    .float-wrap {
      /* 816 = <number of floats> * (<float width> + 2 * <float border width>) */
      width: 816px;
      border: 1px solid;
      /* causes .float-wrap 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>

Ответ 2

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

<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 после загрузки страницы.

Ответ 3

в html добавлены дополнительные ситлы... который устанавливает поля.

также вы должны быть осторожны с полями, установленными в вашем css, потому что.. высота, вероятно, может повлиять на нее, потому что она установлена на определенные пиксели и больше не эластична...

вы можете попробовать создать divs в divs... просто разделите верхний div и средний div и нижний div. упрощает стилизацию для каждого раздела. Надеюсь, это помогло...:) приветствия