층은 이미지를 포함하는 높이로 늘어나지 않습니다

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

Lightbox 링크에는 이미지가 포함되어 있습니다. 이미지 높이는 HTML에 나와 있지만 Safari WebDevelopment Tools에 따르면 Lightbox 링크는 이미지의 높이를 얻지 못하여 Div.entry 레이어가 텍스트의 높이 만 가져오고 이미지 높이가 't 고려.

그것에 대한 해결책이 있습니까?

감사!

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>

ClearFix CSS 코드와 문제를 설명하는 기사는 여기에서 찾을 수 있습니다.

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