Div布局出错

Question

我有一个div，左边是图像，右边是文本。使用较少的文本可以很好地工作，但当我添加越来越多的文本时，它只会破坏整个布局！

Fiddle。

在小提琴中看到，前两行工作得很好，但当我添加更多的文本（第3行）时，布局会变为水平。

我该如何解决这个问题？

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

您甚至可以从img设置margin-right，而不是从.description设置margin-left：http://jsfiddle.net/TjDZa/4/

.postWidget img {
    float: left;
    margin-right:30px;
}
.postWidget .description span {
    font-size: 15px;
}