css - IE、DIV、图像、 float 和 LightView

Question

我想弄清楚为什么图像在 IE 和 Chrome 中看起来乱七八糟。

唉，它是一个古老的公立学校 CMS(我们说的是 00 年代初)，我当然不是程序员，而只是一个试图兼顾 CSS 和 HTML 的爱好者。

希望能得到一些指点。我假设它是关于 float 正确的 DIV 容器，以使其正确呈现。当我去创建覆盖文本时，整个东西乱七八糟地爆炸了。

CSS 可以在下面看到。 Page source can be viewed outside of the CMS frame-template here.

干杯，特林

#persongalleri
{
 margin-left:5px;
 overflow:hidden;
}
img.person /* til personalesiden */
{
    width:80px;
    height:auto;
    border:1px solid #000;
}
div.personwrap
{
    float:left;
    position:relative;
    margin:2px;
}
div.undertekstkasse
{
    position:absolute;
    bottom:1px;
    left:0px;  
    width:100%;  
    background-color:black;  
    font-family: 'Verdana, Arial, Helvetica';  
    font-size:14px;
    font-weight:bold;
    color:white;  
    opacity:0.6; 
    filter:alpha(opacity=60);
}
p.undertekst
{
    padding:6px;  
    margin:0px; 
    text-align:center;      
}

Answer 1

它很难被发现，但所有照片的高度都略有不同，所以当你漂浮它们时，你会看到这种奇怪的行为。如果你在 .personwrap 上放置一个固定的高度，那么这将解决你的布局问题。

div.personwrap {
    height: 105px;
    margin: 2px;
    position: relative;
    float:left;
}

您也可以删除 float ，只需添加 display: inline-block