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

Question

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

<div id="viewport">
    <div id="slides">
        <div>Content 1</div> <!-- not visible -->
        <div>Content 2</div> <!-- visible -->
        <div>Content 3</div> <!-- visible -->
        <div>Content 4</div> <!-- visible -->
        <div>Content 5</div> <!-- not visible -->
        <div>...</div> <!-- not visible -->
    </div>
</div>

Мой подход заключается в том, чтобы иметь родительский div ("viewport") фиксированной ширины / высоты и переполнения: скрытый, чтобы сдвинуть его дочерний div ("слайды"), который имеет фактическое содержимое в своих дочерних divах, влево или право.

Чтобы это работало, мне нужно, чтобы все дочерние элементы «слайдов» были выровнены по горизонтали, и ни один из них не был обернут ниже, что произойдет по умолчанию. Я успешно справляюсь с этим, когда знаю и указываю совокупную ширину дочерних элементов div «слайды» в CSS, но я буду динамически добавлять / удалять их в JS. Я хотел бы избежать необходимости постоянно менять ширину div «слайдов» через JS, а лучше просто узнать, как это сделать в CSS.

Итак, короче говоря, как предотвратить серию элементов div, если их общая ширина неизвестна?

Answer 1

Я думаю, что http://jsfiddle.net/5JHW5/2/ - это то, что вы хотите.Он использует jQuery для определения ширины #slides и соответственно устанавливает ее ширину.Я также добавил некоторые элементы управления для прокрутки, просто потому, что мне нравится делать такие вещи.Если вам нужно увидеть больше в примере, который я привел, дайте мне знать.

Ура!

Answer 2

Хитрость заключается в том, чтобы установить #slides на достаточно большую ширину, чтобы вам никогда не приходилось беспокоиться об этом, а затем нарезать его на желаемую ширину, используя #viewport div, , как показано в этой скрипке . Просто отрегулировав значение left на #slides, вы можете перемещать полосу делений влево и вправо.

CSS:

#viewport {
    width:300px;
    overflow:hidden;
}

#slides {
    width:1000px;
    position:relative;
    left:-150px;
}

#slides div {
    width:100px;
    height:100px;
    float:left;
    border:1px solid black;
}​

Ваш HTML остается неизменным.

Answer 3

Если вы установите display: none на слайдах, которые не должны быть видимыми, они не будут занимать никакого пространства, и нет необходимости в контейнере div, который больше, чем необходимо для хранения ваших трех видимых слайдов.Я добавил класс shown к трем слайдам, чтобы различить, какие из них видимы (вы можете включить это в javascript).Установка float=left на div#slides заставляет его занимать достаточно места для его дочерних элементов.

<div id="viewport">
  <div id="slides">
    <div>Content 1</div> <!-- not visible -->
    <div class="shown">Content 2</div> <!-- visible -->
    <div class="shown">Content 3</div> <!-- visible -->
    <div class="shown">Content 4</div> <!-- visible -->
    <div>Content 5</div> <!-- not visible -->
  </div>
</div>

CSS:

div#slides {
    float: left;
}

div#slides > div {
    float: left;
    width: 10em;
    height: 10em;
    margin: 1em;
    background-color: red;
    display: none;
}

div#slides > div.shown {
    display: block;
}

Answer 4

это пример того, что вы хотите.

<div class="box">
<div class="div1">1st</div>
<div class="div2">2nd</div>
<div class="div3">3nd</div>
<div class="clear">
</div>

CSS

div.box { background: #EEE; height: 100px; width: 600px; }
div.div1{background: #999; float: left; height: 100%; width: auto; }
div.div2{ background: #666; float: left;height: 100%; width: auto;height: 100%; }
div.div3{ background: green; height: 100%; }
div.clear { clear: both; height: 1px; overflow: hidden; font-size:0pt; margin-top: -1px; }