html - CSS - 类移出位置

Question

我应该做这样的事情:

但它实际上看起来像:

正如你在图像上看到的那样，当我在那里添加图像或文本时，“左”类无缘无故地离开了它的位置，而且我 100% 确定文本或图像小于 block 的宽度/高度，所以我真的不知道如何继续和解决这个问题。

我的 HTML:

 <div id="sub-content">
    <span class="left">
    <img src="images/foto.png">
    <span class="topic-name"> Název topicu nebo článku </span>
    </span>
    <span class="middle"></span>
    <span class="right"></span>
 </div>

我的 CSS:

#sub-content{
    margin-left: 20px;
    margin-top: 0px;
    background-image: url("images/sub_content_bg.png");
    background-repeat: repeat-x;
    height: 145px;
    width: 987px;
    display:inline-block;
}
#sub-content .left{
    width: 326px;
    height: 145px;
    display: inline-block;        
}

#sub-content .left img{
    width: 122px;
    height: 121px;
    display: inline-block;
    margin-top: 0px;
    margin-left: 5px;        
}

#sub-content .left .topic-name{
    width: 150px;
    margin-bottom: 130px;
    margin-left: 10px;
    display: inline-block;
    vertical-align: top;
    text-decoration: underline;
    font-weight: 14px;         
} 

#sub-content .middle{
    background-color: orange;
    width: 326px;
    height: 145px;
    display: inline-block;         
}

#sub-content .right{
    background-color: yellow;
    width: 326px;
    height: 145px;
    display: inline-block;         
}

有人可以帮我设计这个样式或者告诉我我做错了什么吗？

附注也可以在以下位置找到实时预览:funedit.com/andurit/new/

Answer 1

如果将 overflow:hidden 添加到 .left div，它将正确对齐。

参见:JSFiddle

(我还将内部 span 替换为 div，因为 div 不应出现在 span 中)。