Div佈局出錯

Question

我有一個div，其中我有一個左側的圖像和右側的文本。用較少的文本，它工作正常，但是當我添加越來越多的文本，它只是破壞整個佈局！

Fiddle.

看到小提琴的前兩排剛剛工作正常，但當我添加一些文字（第3行）的佈局被horibblified。

我該如何解決這個問題？

CSS：

.postWidget { 
    clear:both; 
    margin-bottom: 50px; 
} 
.postWidget img { 
    float: left; 
} 
.postWidget .job_title { 
    font-size: 20px; 
    margin-left: 30px; 
} 
.postWidget .description { 
    margin-left: 30px; 
} 
.postWidget .description span { 
    font-size: 15px; 
    margin-left: 30px; 
} 
.postWidget span a { 
    color: black; 
    text-decoration: none; 
} 
.postWidget .user_desc { 
    margin-left: 80px; 
    padding-top:5px; 
} 
.postWidget .user_desc .name { 
    font-weight: bold; 
} 
.postWidget .user_desc .name, .profession { 
    font-size: 12px; 
} 

Answer 1

你爲什麼要使用<span>標籤爲您的文字？您應該使用<p>代替，就像這樣：

<div class="description"> 
    <p class="for"><b>For:</b> Lorizzle ipsizzle owned shizznit amizzle, consectetizzle adipiscing dope. Nullizzle check out this velizzle, i saw beyonces tizzles and my pizzle went crizzle volutpizzle, suscipit quis, yo pizzle, arcu. Pellentesque bow wow wow tortizzle. Sed erizzle. Shiznit izzle dolor dapibizzle turpizzle stuff fizzle. Maurizzle shizzlin dizzle gangster et turpizzle. Fizzle dawg fo. Check it out stuff you son of a bizzle sizzle. In gizzle habitasse platea dictumst. Fizzle dapibizzle. Break it down fizzle phat, pretizzle mofo, mattizzle sizzle, gangsta vitae, for sure. Hizzle suscipit. Integizzle bling bling velit pimpin'.</p> 
    <br/><p class="offer"><b>Offer:</b> Lorizzle ipsizzle owned shizznit amizzle, consectetizzle adipiscing dope. Nullizzle check out this velizzle, i saw beyonces tizzles and my pizzle went crizzle volutpizzle, suscipit quis, yo pizzle, arcu. Pellentesque bow wow wow tortizzle. Sed erizzle. Shiznit izzle dolor dapibizzle turpizzle stuff fizzle. Maurizzle shizzlin dizzle gangster et turpizzle. Fizzle dawg fo. Check it out stuff you son of a bizzle sizzle. In gizzle habitasse platea dictumst. Fizzle dapibizzle. Break it down fizzle phat, pretizzle mofo, mattizzle sizzle, gangsta vitae, for sure. Hizzle suscipit. Integizzle bling bling velit pimpin'.</p> 

我還添加了一些CSS：

.description p { 
    margin:0 0 0 50px 
} 

如果使用<p>標籤，你可以控制餘量空間，而不是使用<br />無處不在的！另外，我認爲<b>標籤可能會被棄用（它們已經過時了！）請使用<strong>標籤！

<div class="description"> 
    <p class="for"><strong>For:</strong> Lorizzle ipsizzle owned shizznit amizzle, consectetizzle adipiscing dope. Nullizzle check out this velizzle, i saw beyonces tizzles and my pizzle went crizzle volutpizzle, suscipit quis, yo pizzle, arcu. Pellentesque bow wow wow tortizzle. Sed erizzle. Shiznit izzle dolor dapibizzle turpizzle stuff fizzle. Maurizzle shizzlin dizzle gangster et turpizzle. Fizzle dawg fo. Check it out stuff you son of a bizzle sizzle. In gizzle habitasse platea dictumst. Fizzle dapibizzle. Break it down fizzle phat, pretizzle mofo, mattizzle sizzle, gangsta vitae, for sure. Hizzle suscipit. Integizzle bling bling velit pimpin'.</p> 
    <br/><p class="offer"><strong>Offer:</strong> Lorizzle ipsizzle owned shizznit amizzle, consectetizzle adipiscing dope. Nullizzle check out this velizzle, i saw beyonces tizzles and my pizzle went crizzle volutpizzle, suscipit quis, yo pizzle, arcu. Pellentesque bow wow wow tortizzle. Sed erizzle. Shiznit izzle dolor dapibizzle turpizzle stuff fizzle. Maurizzle shizzlin dizzle gangster et turpizzle. Fizzle dawg fo. Check it out stuff you son of a bizzle sizzle. In gizzle habitasse platea dictumst. Fizzle dapibizzle. Break it down fizzle phat, pretizzle mofo, mattizzle sizzle, gangsta vitae, for sure. Hizzle suscipit. Integizzle bling bling velit pimpin'.</p> 

更新fiddle

Answer 2

發揮與佈局:) http://jsfiddle.net/TjDZa/3/

.postWidget .description { 
    margin-left: 30px; 
    overflow:hidden; 
} 

你甚至可以設置margin-right從img代替margin-left從.description：http://jsfiddle.net/TjDZa/4/

.postWidget img { 
    float: left; 
    margin-right:30px; 
} 

.postWidget .description span { 
    font-size: 15px; 
}