图层不会拉伸到包含图像的高度

StackOverflow https://stackoverflow.com/questions/1021667

  •  06-07-2019
  •  | 
  •  

题

请参阅 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 webdevelopment工具，灯箱链接没有获得图像的高度，导致div.entry图层只获得文本的高度，图像高度为n没有考虑到。

任何解决方案？

谢谢！

有帮助吗？

解决方案

给div溢出：隐藏并确保DIV有宽度。

其他提示

你的问题有点不清楚，但是从经验中收集你的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

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top