Блог

Я создаю слайдер изображения. У меня есть родительский <div> элемент, который будет маскировать более широкий дочерний элемент:

 <div class="viewport">
    <div class="strip">
       <div class="item">
         <img src="1.png">
        </div>
        <div class="item">
          <img src="2.png" >
        </div>
        <div class="item">
            <img src="3.png">
        </div>
     </div>
</div>
  

Мой родительский элемент имеет фиксированную ширину и будет показывать полосы прокрутки при переполнении содержимого:

 .viewport{
    width:400px;
    height: 100px;
    overflow:scroll;
    margin-top:100px;
}
  

Его дочерний элемент, .strip , должен расширяться, чтобы содержать все его дочерние элементы в виде горизонтальной строки. В прошлом, чтобы гарантировать .strip , что он может содержать дочерние элементы без очистки, я бы либо:

• суммируйте ширину заранее определенного количества дочерних элементов и жестко запрограммируйте его
• сумма ширин неизвестного числа дочерних элементов с помощью javascript

Поскольку я ориентируюсь на современные браузеры, я подумал, что, возможно, проблему можно было бы решить с помощью flexbox :

 .strip{
    display: flex;
    height:100px;
}

.item{
    width:150px;
    flex-basis:150px;
    margin-right:10px;
}
  

Это становится мучительно близко, но все мои item s укладываются друг на друга:

http://jsfiddle.net/rytPP/14/

Есть ли какой-то способ распределить их по пространству, или нет способа обойти .viewport ограничение ширины?

Как насчет простого использования display:inline-block; для .item и white-space:nowrap; для .strip ?

 .strip{
    height:100px;
    white-space:nowrap;
    font-size:0;
}

.item{
    width:150px;
    display:inline-block;
    margin-right:10px;
}
  

Согласно этой скрипке…

Таким образом, вы не ограничены браузерами, поддерживающими flexbox.