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

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, но, согласно моим инструментам веб-разработки Safari, ссылка лайтбокса не получает высоту изображения, в результате чего слой div.entry получает только высоту текста, а высота изображения не увеличивается. не учтено.

Есть ли решение этой проблемы?

Спасибо!

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