La capa no se estira hasta la altura de la imagen que contiene

Question

Ver http://www.martenminkema.nl

Las capas de cada entrada solo ganan la altura del texto que contiene. La altura de la imagen no se tiene en cuenta, lo que resulta en problemas con algunas marcas de diseño en algunos casos.

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;
}

El enlace lightbox contiene la imagen. La altura de la imagen se proporciona en el html, pero de acuerdo con mis herramientas de desarrollo web de safari, el enlace de la caja de luz no gana la altura de la imagen, lo que da como resultado que la capa div.entry solo obtenga la altura del texto y la altura de la imagen no No se tiene en cuenta.

¿Alguna solución para eso?

¡Gracias!

Answer 1

proporcione el desbordamiento div: oculto y asegúrese de que el DIV tenga un ancho.

Answer 2

Su pregunta no está clara, pero a partir de la experiencia, tiene una imagen dentro de su DIV que flota a la izquierda.

Puede usar una técnica popular llamada clearfix para asegurarse de que el DIV externo tenga la misma altura que el texto y la imagen dentro de él.

Al mirar el sitio que menciona, puede resolver esto de la siguiente manera (observe que agregué la clase " 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>

El código CSS de clearfix y un artículo que explica su problema se pueden encontrar aquí:

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