2
我有這個佈局我正在工作，並在帖子部分（它就像一個博客），我希望它看起來像這樣（忽略圖像中的細微差異/樣式，這是從PSD取出）：浮動圖像滲出其div容器到另一個div
所以我試圖對其進行編碼，設置爲左浮動，因爲我想要的職位描述只是在其右側的新聞文章的特色圖像。 img被設置爲300px作爲標準，其高度意味着根據特色圖片的不同而不同。對於標籤部分，它有它自己的div。
因此，我嘗試編碼它，因爲某些原因，特色圖像流出它的容器div，現在重疊標籤div（see the actual page here）。看看它下面有標籤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;
}
謝謝你們。
完美的工作！非常感謝你！ – Abby 2013-05-05 04:39:10