Ive получил список элементов <span>
, которые можно перемещать влево и вправо внутри элемента <div>
, и если некоторые промежутки выходят за пределы div, они должны быть скрыты. Это работает отлично, используя overflow: hidden
. Однако, если в div больше пробелов, чем в div, обтекание охватывает, что является нежелательным поведением для моего варианта использования. Как сделать прокрутки не обернутыми?
Ive сделал jsFiddle, чтобы показать, что я имею в виду. Когда вы нажмете внутри .board
, вы добавите еще один .card
. По четвертой карте вы увидите упаковку.
Примечание. Тот факт, что используются интервалы, не очень важен, поэтому, если его можно заставить работать, например, элементы списка, которые, вероятно, будут в порядке. Важно то, что элементы могут содержать изображение и текст под ним.
Вот код из jsFiddle:
<div class="board">
<div class="cards"></div>
</div>
$('.board').mousemove(function(e) {
$('.cards').css({left: e.pageX});
});
$('.board').click(function(e) {
$('.cards').append("<span class='card'></span>")
});
.card {
border: 1px solid black;
width: 100px;
height: 100px;
float: left;
margin-left: 4px;
margin-right: 4px;
}
.cards {
position: relative;
top: 10px;
}
.board {
width: 400px;
height: 120px;
border: 1px solid red;
position: relative;
overflow: hidden;
}