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