Я не понимаю, как я динамически изменял размер ul в div

Question

Я динамически заполняю 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;
}

Answer 1

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

Answer 2

возможно, замените элементы <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 */
}

Answer 3

Свойство div # lasteventimg имеет неправильное значение высоты.

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

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

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