Таблица размеров после его самого высокого элемента

Question

У меня есть неупорядоченный список с n элементы списка. Высота элемента определяется его содержимым. Показывается только один элемент; остальные скрыты с помощью CSS (display: none).

Я хочу, чтобы элемент UL сохранял свою высоту, когда самый высокий из элементов скрыт. Любые идеи, что я могу сделать для этого?

Пример:

UL высота 200px:

<ul> 
    <li>Nulla sed egestas ante. Integer aliquet lectus ac felis euismod ultrices. Praesent magna libero, vestibulum nec tincidunt ac, lacinia et nibh. Pellentesque laoreet, turpis sed consectetur ullamcorper, dolor turpis mollis nulla, at finibus nibh magna vitae velit.</li> 
    <li style="display:none">dolor turpis mollis nulla, at finibus nibh magna vitae velit.</li> 
    <li style="display:none">Aliquet lectus dolor turpis mollis nulla, at finibus nibh magna vitae velit.</li> 
</ul> 

UL высота 100px:

<ul> 
    <li style="display:none">Nulla sed egestas ante. Integer aliquet lectus ac felis euismod ultrices. Praesent magna libero, vestibulum nec tincidunt ac, lacinia et nibh. Pellentesque laoreet, turpis sed consectetur ullamcorper, dolor turpis mollis nulla, at finibus nibh magna vitae velit.</li> 
    <li>dolor turpis mollis nulla, at finibus nibh magna vitae velit.</li> 
    <li style="display:none">Aliquet lectus dolor turpis mollis nulla, at finibus nibh magna vitae velit.</li> 
</ul> 

Я хотел бы видеть CSS решение этой проблемы!

Редактировать

Как некоторые из вас, возможно, уже поняли уже, список используется как слайд-шоу. Я использую jQuery hide/show для переключения между элементами. К сожалению, список «прыгает» с каждым переходом, особенно между двумя элементами несоответствия высоты.

ul { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    background: blue; 
    width: 100%; 
} 

Edit 2

Я придумал Scripty решение проблемы. Я не совсем доволен этим.

var i = 0; 
 

 
window.setInterval(function() { 
 
    $('ul').css({marginLeft: -300 * i}); 
 
    i += 1; 
 
    if (i > $('ul li').length) { 
 
    i = 0; 
 
    } 
 
    }, 1000);

div { 
 
    overflow: hidden; 
 
    width: 300px; 
 
    border: 1px solid red; 
 
    } 
 

 
ul { 
 
    list-style: none; 
 
    padding: 0; 
 
    width: 900px; 
 
    margin-left: 0; 
 
} 
 

 
li { 
 
    float: left; 
 
    width: 300px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
<ul> 
 
     <li>Nulla sed egestas ante. Integer aliquet lectus ac felis euismod ultrices. Praesent magna libero, vestibulum nec tincidunt ac, lacinia et nibh. Pellentesque laoreet, turpis sed consectetur ullamcorper, dolor turpis mollis nulla, at finibus nibh magna vitae velit.</li> 
 
     <li>dolor turpis mollis nulla, at finibus nibh magna vitae velit.</li> 
 
     <li>Aliquet lectus dolor turpis mollis nulla, at finibus nibh magna vitae velit.</li> 
 
    </ul> 
 
    </div>

Answer 1

Мы решили работать со своими собственными с но с процентами. Единственный бит JavaScript, который вам понадобится, это бит, который присваивает левое поле, и ширину в процентах (100/n) элементов списка.

Answer 2

Browser косяк знать высоту вашего максимального элемента высоты, если он скрыт в самом начале, вы должны использоваться сценарий Js здесь, чтобы обнаружить и сохранить более наибольший элемент здесь, как:

$(function(){ 
 
    var hUl = 0; 
 
    $('li').each(function(k, li){ 
 
    var isVisible = $(li).is(':visible'); 
 
    if(!isVisible) {$(li).show();} 
 
    hUl =($(li).height() > hUl) ? $(li).height() : hUl; 
 
    $('ul').height(hUl); 
 
    if(!isVisible) {$(li).hide();} 
 
    }); 
 
});

ul { 
 
    width: 200px; 
 
    background-color: blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li style="display:none;">Nulla sed egestas ante. Integer aliquet lectus ac felis euismod ultrices. Praesent magna libero, vestibulum nec tincidunt ac, lacinia et nibh. Pellentesque laoreet, turpis sed consectetur ullamcorper, dolor turpis mollis nulla, at finibus nibh magna vitae velit.</li> 
 
    <li>dolor turpis mollis nulla, at finibus nibh magna vitae velit.</li> 
 
    <li style="display:none;">Aliquet lectus dolor turpis mollis nulla, at finibus nibh magna vitae velit.</li> 
 
</ul>