我正在处理这个布局，并且在帖子部分（就像一个博客）上，我希望它看起来像这样（忽略图像/样式的细微差异，这是从 PSD 中获取的）：
所以我尝试对其进行编码，将新闻帖子的特色图像设置为向左浮动，因为我希望帖子描述位于其右侧。img 的标准设置为 300 像素，高度会根据特色图像的不同而有所不同。对于标签部分，它有自己的 div。
所以我尝试这样编码，由于某种原因，特色图像从其容器 div 中流出，现在与标签 div 重叠（请参见此处的实际页面）。看看它是如何将标签 div 放在它下面的吗？那是我的问题。我希望标签 div 在特色图像下方有自己的行。我不知道为什么图像从其 div 中流出。
（我只会发布相关领域，因为这是我唯一遇到问题的部分）：
<div id="newsmain">
<div id="titlearea">
<div class="comment_bubble">
<a href="">9</a>
</div>
<span class="post_titles"><a href="">Colored Prototypes of Alter's Tales of Vesperia Estelle Figure - Pre-orders Now Open!</a></span><br />
<span class="under_titles">POSTED BY <a href="">A745</a> | APRIL 27, 2013 | 8:00pm GMT | FILED UNDER: <a href="">TALES NEWS</a></span>
</div>
<!-- NEWS BODY -->
<div class="newsbody">
<a href=""><img class="featured_image" src="http://gallery.abyssalchronicles.com/albums/userpics/10002/estelle_10.jpg" alt="" /></a>
Alter has released pictures of the colored prototype of their upcoming <em>Tales of Vesperia 1/8 Scale Estelle figure</em>. Some shops also have pre-orders open. In addition, the <em>Milla Maxwell plushie</em>, also by Alter, has some pre-orders open as well.
<br /><br /><br />
<a href="">READ THE REST »</a>
</div>
<div class="tagsline">
TAGS: <a href="">TALES OF VESPERIA</a>, <a href="">TALES OF XILLIA</a>, <a href="">ESTELLE</a>, <a href="">MILLA MAXWELL</a>, <a href="">MERCHANDISE</a>, <a href="">PS3</a>, <a href="">XBOB360</a>, <a href="">ALTER</a>, <a href="">ALTER</a>, <a href="">ALTER</a>, <a href="">ALTER</a>, <a href="">ALTER</a>, <a href="">ALTER</a>,
</div>
</div>
以及为此的CSS：
#newsheader {
width: 628px;
background: #3396cf;
font-family: 'Merriweather Sans', Tahoma, Helvetica, Arial, Verdana, sans-serif;
font-weight: bold;
color: #ffffff;
font-size: 18px;
padding: 5px;
margin-bottom: 10px;
}
#titlearea {
width: 628px;
border-left: 9px solid #da5099;
border-bottom: 1px solid #c5a7bc;
padding: 2px 0 1px 4px;
}
.comment_bubble {
width: 50px;
height: 35px;
padding-top: 3px;
text-align: center;
color: #ffffff;
font-family: Georgia, Arial, Tahoma, Verdana, sans-serif;
font-size: 15px;
font-weight: bold;
background: url('images/commentbubble.png') no-repeat left top;
float: right;
}
.comment_bubble a {
color: #ffffff;
text-decoration: none;
display: block;
width: 100%;
height: 100%;
}
.post_titles {
color: #6c053c;
font-family: 'Merriweather Sans', Tahoma, Helvetica, Arial, Verdana, sans-serif;
font-weight: bold;
font-size: 17px;
padding: 0;
}
.post_titles a {
color: #6c053c;
text-decoration: none;
}
.post_titles a:hover {
color: #ba0767;
}
.tagsline {
font-family: Helvetica, Arial, Verdana, sans-serif;
font-weight: bold;
font-size: 11px;
color: #636262;
padding: 5px 5px 3px 13px;
border-bottom: 1px solid #c5a7bc;
text-transform: uppercase;
}
.tagsline a {
color: #868889;
text-decoration: none;
width: 100%;
}
.tagsline a:hover {
color: #000000;
}
.under_titles {
font-family: Helvetica, Arial, Verdana, sans-serif;
font-weight: bold;
font-size: 11px;
color: #636262;
padding: 0;
text-transform: uppercase;
}
.under_titles a {
color: #868889;
text-decoration: none;
}
.under_titles a:hover {
color: #000000;
}
.newsbody {
padding: 9px 8px 15px 13px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
}
.featured_image {
border: 0px;
margin-right: 10px;
margin-bottom: 10px;
width: 300px;
height: auto;
float: left;
text-align: left;
}
多谢你们。