У меня есть подразделение, в котором я хочу показывать изображения и нажимать их в лайтбокс. Я разместил их слева и отобразил их в строке. set overflow-x для прокрутки, но он по-прежнему помещает изображения ниже, когда пространство строк недостаточно. Я хочу, чтобы они были встроенными и отображали горизонтальную прокрутку, когда это было необходимо.
ПРИМЕЧАНИЕ. Я не могу изменить структуру изображений внутри. Это должно быть img внутри якоря. Мой лайтбокс требует этого.
HTML:
<div id="myWorkContent">
<a href="assets/work/1.jpg"><img src="assets/work/1.jpg" height="190" /></a>
<a href="assets/work/2.jpg"><img src="assets/work/2.jpg" height="190" /></a>
<a href="assets/work/3.jpg"><img src="assets/work/3.jpg" height="190" /></a>
<a href="assets/work/4.jpg"><img src="assets/work/4.jpg" height="190" /></a>
<a href="assets/work/5.jpg"><img src="assets/work/5.jpg" height="190" /></a>
<a href="assets/work/6.jpg"><img src="assets/work/6.jpg" height="190" /></a>
</div><!-- end myWorkContent -->
CSS
#myWorkContent{
width:530px;
height:210px;
border: 13px solid #bed5cd;
overflow-x: scroll;
overflow-y: hidden;
}
#myWorkContent a {
display: inline;
float:left
}
Я знаю, что это очень просто, но я просто не могу это сделать. Не знаю, что случилось.