Как сделать родительский div высотой своих детей?

Это кажется действительно глупым вопросом, но я не могу понять это.Как сделать родительский div высотой своих детей?

У меня есть UL в горизонтальном меню, но родительский div не будет регулировать высоту дочерних элементов. Вот jsFiddle: http://jsfiddle.net/STSjm/202/

HTML

<div class="menu"> 
<ul> 
    <li><a href="#">Menu 1</a></li> 
    <li><a href="#">Menu 2</a></li> 
    <li><a href="#">Menu 3</a></li> 
</ul> 
<div class="clear"></div>

И CSS:

.menu { 
    background: blue; 
} 

.menu li{ 
    float: left; 
    background: green; 
} 

.menu li a{ 
    background: red; 
    padding: 25px 25px 25px 25px; 
} 

.menu li a:hover{ 
    background: orange; 
} 

.clear { 
    clear: both; 
}

источник

2012-01-21 convoke

Ясный метод работает хорошо, и .menu будет высотой его ребенка. Но ребенок .menu - это ul. И уль не имеет высоты его детей. Таким образом, существует проблема между ul> li. Пример: http://jsfiddle.net/STSjm/215/ –

jsfiddle version 202? Вы очень много работали над этим? ;) –

Ох. Я тоже новичок в jsFiddle. Я определенно не сделал 205 итераций. Я помню сейчас: я взял кого-то elses jsFiddle для другого вопроса и только начал работать над этим. Может быть, это плохая форма ... Если вы вернетесь на 100, вы увидите, что это нечто совершенно другое. Я просто вычислил все эти новомодные инструменты ... простите меня. – convoke

Вот что происходит:

Ваши <a> элементы имеют отступы, но они display:inline по умолчанию который добавляет пробел вне элемент, хотя фактически не добавляет ширины/высоты к нему, поэтому меню не расширяется.

Чтобы исправить это, установите display:block к якорям:

http://jsfiddle.net/STSjm/216/

Кроме того, вам не нужно "Очистить" DIV, добавив этот CSS должен сделать трюк:

.menu { 
    float:left; 
    width:100%; 
}

http://jsfiddle.net/STSjm/218/

Существует также ряд CSS только для «clearfix» трюков, чтобы решить эту проблему, не добавляя лишних ненужных H Разметка TML.

источник

2012-01-21 18:18:21

Отлично! Спасибо! – convoke

Нет проблем, добро пожаловать на сайт и спасибо за предоставление ясного, незагроможденного объяснения вашей проблемы, с исходным кодом и живой демонстрацией. Отлично. –

Как сделать родительский div высотой своих детей?

ответ

Смежные вопросы