Я делаю некоторые вещи, используя jQuery.Иногда у меня есть, например, куча изображений в списке.Это горизонтальный список (поэтому каждое изображение отображается слева направо).Этот список настолько велик, что на странице отображаются только 9 из 30 изображений (в зависимости от вашего разрешения экрана).Поэтому я использую jQuery для перемещения слева направо (если ваша мышь находится слева от экрана, она прокручивается влево и наоборот).
Чтобы это работало, мой список обернутв дел.Этот div использует ширину 999999 пикселей.Таким образом, изображения могут достигать ширины 999999 пикселей, пока не отобразится следующий ряд изображений.Поскольку в списке автоматически отображается все по горизонтали, пока следующее изображение больше не умещается на странице, это следующее изображение затем отображается в новой строке.Так что я получаю «таблицу» 3х3, когда я не использую дополнительный div.Когда я помещаю div вокруг всего с шириной 999999 пикселей, список становится горизонтальным до 999999 пикселей, и после этого он создает новую строку.
Мой вопрос: есть ли более простой способ выполнитьэто?
Могу ли я установить ширину: width:infinite; или что-то в этом роде?Или я делаю все это неправильно?
Надеюсь, я ясно выразился в своем среднем английском.Заранее спасибо!
HTML:
<div id="images">
<ul id="listimages">
<li><img src="img/set1/1.jpg"/></li>
<li><img src="img/set1/2.jpg"/></li>
<li><img src="img/set1/3.jpg"/></li>
<li><img src="img/set1/4.jpg"/></li>
<li><img src="img/set1/5.jpg"/></li>
<li><img src="img/set1/6.jpg"/></li>
<li><img src="img/set1/7.jpg"/></li>
<li><img src="img/set1/8.jpg"/></li>
<li><img src="img/set1/9.jpg"/></li>
<li><img src="img/set1/10.jpg"/></li>
<li><img src="img/set1/11.jpg"/></li>
<li><img src="img/set1/12.jpg"/></li>
</ul>
</div>
CSS:
body {
background: black;
color:white;
}
#images{
float:left;
}
ul#listimages{
width:100%;
list-style-type:none;
overflow: hidden;
}
ul#listimages li {
display: block;
float: left;
}
ul#listimages img {
height:200px;
width:400px;
}