CSS - Class正在走出困境

Question

我应该做类似的事情：

但它实际上看起来像：

你可以在图像上看到＆＃34;左＆＃34;当我在那里添加图像或文本时，我没有理由离开它的位置，并且我100％确定文本或图像小于块的宽度/高度，所以我真的不知道如何继续并修复它。

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

请有人帮我设计这个或者告诉我我做错了什么吗？

P.S。实时预览也可以在：funedit.com/andurit/new /

上找到

Answer 1

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

请参阅：JSFiddle

（我还将内部span替换为div，因为div内不应出现span。）

Answer 2

尝试在CSS文件中添加position属性。在#sub-content中，添加position:static;。这应该使元素按照它们在文档中的显示顺序呈现。