0

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

小提琴。

在小提琴中看到前 2 行工作正常，但是当我添加更多文本（第 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;
}
4

2 回答 2

2

为什么要<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>

更新的小提琴

于 2013-07-03T17:12:08.333 回答
1

玩布局:) http://jsfiddle.net/TjDZa/3/

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

您甚至可以从margin-right以下位置设置： http : img//jsfiddle.net/TjDZa/4/ margin-left.description

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

.postWidget .description span {
    font-size: 15px;
}
于 2013-07-03T17:18:50.390 回答