Блог

Я динамически заполняю div элементами li, используя php. У меня возникли проблемы с ограничением области прокрутки содержимым. Ранее я использовал дерьмовую нагрузку дополнительного пространства в своем ul, и я все еще использую, но когда я устанавливаю height в css на 70%, это работает отлично.

Это потому, что ul традиционно вертикальный, а я устанавливаю его горизонтально?

вот ссылка на рабочий сайт http://www.evan-livingston.com/test/gallery.php

Мой css:

 div#lasteventimg {
    width: 100%;
    heigth: 200px;
    overflow-x: scroll;
    overflow-y: hidden;
    position: relative;
}

div#lasteventimg ul {
    list-style: none;
    height: 70%;
    width: 8000px;      
    margin: auto;
}

div#lasteventimg ul li {
    float:left;    
    display: inline-block;  
}

div#lasteventimg img {
    width: 200x;
    float: left;
}
  

У вашего div#lasteventimg неверно указано свойство height.

ul является элементом уровня блока и отображается как таковой. Div также является элементом уровня блока.

Поскольку вы переместили li, они располагаются рядом друг с другом, пока контейнер не заполнится по горизонтали. Затем они будут перенесены на следующую строку. Чтобы предотвратить перенос, вы можете использовать overflow scroll, но ul не поддерживает это свойство. Поэтому вместо этого вы используете overflow для содержащего div.

Трудно сказать, почему ваш старый способ не сработал, а ваш новый способ работает без примера кода.

Вы можете сэкономить время, выполнив это в jQuery. Взгляните на эту статью, это должно помочь и сделать ее выглядеть в 10 раз лучше.

возможно, замените <li> элементы на <div> и удалите <ul>

 div#lasteventimg {
    overflow-x: scroll;
    overflow-y: hidden;
    width: 70%;
}
div#lasteventimg ul {
    list-style: none outside none;
    margin: auto;
}
div#lasteventimg div {
    display: table-cell;
}
div#lasteventimg img {
    /* remove the float:left from here */
}