couche ne tend pas à la hauteur de l'image contenant

Question

Voir http://www.martenminkema.nl

Les couches de chaque entrée que gagner la hauteur du texte qu'il contient. La hauteur de l'image n'est pas prise en compte, ce qui entraîne des problèmes avec certains balisages de mise en page dans certains cas.

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

Le lien visionneuse contient l'image. La hauteur de l'image est donnée dans le html, mais selon mes outils de développement web safari, le lien lightbox ne gagne pas la hauteur de l'image, ce qui fait que la couche div.entry n'obtient que la hauteur du texte et la hauteur de l'image isn pas pris en compte.

Une solution à cela?

Merci!

Answer 1

donnent le trop-plein de div: caché et assurez-vous que la dIV a une largeur.

Answer 2

Votre question est un peu floue, mais en recueillant par expérience vous avez une image à l'intérieur de votre DIV qui est flottée vers la gauche.

Vous pouvez utiliser une technique populaire appelée clearfix pour vous assurer que le DIV externe a la même hauteur que le texte et l'image qu'il contient.

En regardant le site que vous mentionnez que vous pouvez résoudre, comme suit (avis i ajouté le « clearfix » class):

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

Le clearfix code CSS et un article qui explique votre problème se trouve ici:

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