CSS Относительное-Абсолютное позиционирование приводит к тому, что контейнер не имеет высоты - PullRequest
Новая
       18

CSS Относительное-Абсолютное позиционирование приводит к тому, что контейнер не имеет высоты

0 голосов
/ 22 октября 2010

Я хочу создать слайд-шоу из изображений, которые содержатся в <ul>: 

<ul>
    <li><a href="images/01/large.jpg"><img src="images/01/default.jpg"></a></li>
    <li><a href="images/02/large.jpg"><img src="images/02/default.jpg"></a></li>
    <li><a href="images/03/large.jpg"><img src="images/03/default.jpg"></a></li>
    <li><a href="images/04/large.jpg"><img src="images/04/default.jpg"></a></li>
    <li><a href="images/05/large.jpg"><img src="images/05/default.jpg"></a></li>
    <li><a href="images/06/large.jpg"><img src="images/06/default.jpg"></a></li>
    <li><a href="images/07/large.jpg"><img src="images/07/default.jpg"></a></li>
    <li><a href="images/08/large.jpg"><img src="images/08/default.jpg"></a></li>
    <li><a href="images/09/large.jpg"><img src="images/09/default.jpg"></a></li>
    <li><a href="images/10/large.jpg"><img src="images/10/default.jpg"></a></li>
    <li><a href="images/11/large.jpg"><img src="images/11/default.jpg"></a></li>
    <li><a href="images/12/large.jpg"><img src="images/12/default.jpg"></a></li>
    <li><a href="images/13/large.jpg"><img src="images/13/default.jpg"></a></li>
</ul>
<style>
    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        position: relative;
    }
    li {
        display: none;
        list-style-type:none;
        margin:0;
        padding:0;
        position: absolute;
    }
</style>

Вы можете видеть, что HTML-разметка и CSS довольно просты. У меня проблема в том, что хотя все изображения имеют одинаковый размер, размер заранее неизвестен. Поэтому я не могу установить фиксированную высоту для <ul>, но мне действительно нужно - потому что элементы с абсолютным позиционированием внутри элемента с относительным позиционированием означают, что контейнер имеет нулевую высоту, и изображения начинают появляться поверх содержимого под ним.

Я использую jQuery, поэтому, пожалуйста, направьте меня к решению на основе CSS и / или jQuery. Обратите внимание , что я уже пробовал: 

$("ul").height(
    $("ul li:eq(0)").outerheight()
)

но при готовности документа изображения не загружаются и, следовательно, высота неизвестна. Я также попытался добавить задержку / ожидание $("ul li:eq(0)").outerheight() > 0, но это создает проблемы в IE. IE часто возвращает значение больше нуля, когда он частично загрузил изображение, но это значение, если часто меньше, чем фактическая высота изображения. Дайте мне знать, если вам нужны какие-либо разъяснения.

Ответы [ 3 ]

1 голос
/ 22 октября 2010

Например: 

var width, height;

$('ul img').load( function () {
    width  = this.width;
    height = this.height;
});

Заимствует ответ на этот вопрос Получить реальную ширину и высоту изображения с помощью JavaScript? (в Safari / Chrome)

1 голос
/ 22 октября 2010

Я бы сказал, что технически было бы лучше сделать это с противоположной стороны. Снимите дисплей: нет; из вашего CSS, затем получите высоту окна при загрузке страницы (таким образом, без JavaScript люди все еще могут видеть изображения). Затем установите для свойства отображения li's значение none с помощью javascript.

Вы получаете высоту и ту же функциональность!

0 голосов
/ 22 октября 2010

И этим заниматься? 

$("ul").css({
   height: $("ul li:eq(0)").find("img").outerheight()
});
...