слой не растягивается высоты содержащего изображение

Question

См http://www.martenminkema.nl

Слои каждой записи только получить высоту текста, который она содержит. Высота изображения не учитывается, что приводит к проблемам с некоторой разметкой компоновки в некоторых случаях.

HTML:

<div id="entry-296" class="hentry entry gedachten"> 
<a href="http://www.martenminkema.nl/gedachten/2009/06/autobahnbar-1.html" rel="bookmark"><span class="date">12.06.09</span></a><h2 class="entry-title"><a href="http://www.martenminkema.nl/gedachten/2009/06/autobahnbar-1.html" title="Geplaatst onder Gedachten op 12 juni 2009 23:32 in de categorie(&euml;n): buitenland, met de volgende tags: berlijn">Autobahnbär</a></h2><div class="icoontje" title="Gedachten"><div class="linkwrapper transparent"><a href="http://www.martenminkema.nl/gedachten/2009/06/autobahnbar-1.html" class="clickable">&nbsp;</a></div></div> 
<div class="entry-content"> 
<a href="http://www.martenminkema.nl/gedachten/Afbeeldingen/Autobahnb%C3%A4r-in-Berlijn.jpg" rel="lightbox" title="Beer aan de snelweg in Berlijn (foto: M. Minkema)"><img src="http://www.martenminkema.nl/gedachten/assets_c/2009/06/Autobahnbär-in-Berlijn-thumb-150xauto.jpg" width="150" height="112" alt="" class="icoon"/></a> 
Beer met uitzicht, Tierpark Berlin op een vroege ochtend.</div> 
</div> 

CSS:

div.entry { 
clear: both; 
display: block; 
font-size: 12px; 
margin-bottom: 10px; 
margin-left: 0px; 
margin-right: 0px; 
margin-top: 0px; 
padding-bottom: 0px; 
padding-left: 0px; 
padding-right: 0px; 
padding-top: 0px; 
position: relative; 
text-align: left; 
width: 350px; 
} 

a[rel='lightbox'] { 
color: black; 
cursor: auto; 
display: block; 
font-size: 12px; 
font-weight: bold; 
margin-bottom: 0px; 
margin-left: 0px; 
margin-right: 200px; 
margin-top: 0px; 
padding-bottom: 0px; 
padding-left: 0px; 
padding-right: 0px; 
padding-top: 0px; 
text-decoration: none; 
width: 150px; 
} 

Ссылка лайтбокс содержит изображение. Высота изображения указана в html, но в соответствии с моими инструментами веб-разработки сафари ссылка на лайтбоксе не достигает высоты изображения, в результате чего уровень div.entry получает только высоту текста, а высота изображения isn не учтено.

Любое решение?

Спасибо!

Answer 1

дают переполнения Div: скрытый и убедитесь, что DIV имеет ширину.

Answer 2

Ваш вопрос немного неясен, но, исходя из опыта, у вас есть изображение внутри вашего DIV, которое перемещается влево.

Вы можете использовать популярный метод, называемый clearfix, чтобы убедиться, что внешний DIV имеет ту же высоту, что и текст и изображение внутри него.

Глядя на сайте вы упоминаете вы можете решить эту проблему следующим образом (уведомление я добавлен класс «clearfix»):

<div class="entry-content clearfix"> 
<a href="..."> 
<img class="icoon" width="150" height="147" alt="" src="..."/> 
</a> 
Sommige verkeersborden krijgen een totaal andere lading als je ze een stukje kantelt. 
</div> 

Код CSS clearfix и статью, которая объясняет вашу проблему, можно найти здесь:

http://www.positioniseverything.net/easyclearing.html