Le calque ne s'étire pas à la hauteur de l'image contenant

Question

Voir http://www.martenminkema.nl

Les calques de chaque entrée ne gagnent que la hauteur du texte qu’elle contient. La hauteur de l'image n'est pas prise en compte, ce qui entraîne parfois des problèmes de balisage de présentation.

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 lightbox contient l'image. La hauteur de l'image est indiquée en html, mais selon mes outils de développement Web de Safari, le lien de la visionneuse ne gagne pas la hauteur de l'image, de sorte que la couche div.entry n'obtient que la hauteur du texte et que la hauteur de l'image est isn. pas pris en compte.

Avez-vous une solution à cela?

Merci!

Answer 1

donnez le dépassement de div: caché et assurez-vous que la DIV a une largeur.

Answer 2

Votre question est un peu floue, mais l'expérience nous montre que votre DIV contient une image qui flotte à gauche.

Vous pouvez utiliser une technique courante appelée clearfix pour vous assurer que la DIV externe a la même hauteur que le texte et l'image à l'intérieur.

En regardant le site que vous mentionnez, vous pouvez le résoudre comme suit (notez que j'ai ajouté la classe "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>

Le code CSS clearfix et un article expliquant votre problème se trouvent ici:

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