Question

我的文字似乎不想在这部分文字下面！ http://prntscr.com/1x2zju

无论我们如何努力让它在它之下，它都不会低于它。

.avatar {
  float: left;
  width: 35px;
  height: 35px;
  border: 1px solid #000;
}

.name {
  color: #3B63DB;
  font-size: 15px;
  margin-top: 0;
  float: left;
  padding-left: 5px;
}

.text {
  font-size: 12px;
  color: #000;
  font-family: Helvetica, 'SEGOEUIL', sans-serif;
  margin-left: 3px;
  float: auto;
}

HTML：

<div id='post'>
<img class='avatar' src='http://cppsgang.com/images/person.png'>
        <p class='name'>Thomas A.</p>
        <p class='text'>Hello there! This is my status update. Unfortunately, it will not go below my name. Is there any way I can put it below my name, or is it stuck like this forever? I have to add more in, blah blah blah, to show you how it eventually breaks apart - just not underneath the name. Thanks for all the help you can give!</p>
        <a href='system/posts/delete.php?id=$row[0]'/><span style='color: red;'>Delete</span></a>

</div>

谢谢！

http://jsfiddle.net/QUFx5/

Answer 1

使用工作编辑

JSFIDDLE

HTML

<div id='post'>
    <img class='avatar' src='http://lorempixel.com/output/people-q-c-35-35-9.jpg'>
            <p class='name'>Thomas A.</p>
            <p class='text'>Hello there! This is my status update. Unfortunately, it will not go below my name. Is there any way I can put it below my name, or is it stuck like this forever? I have to add more in, blah blah blah, to show you how it eventually breaks apart - just not underneath the name. Thanks for all the help you can give!</p>
            <a href='system/posts/delete.php?id=$row[0]'/><span style='color: red;'>Delete</span></a>

    </div>

CSS

.avatar {
  float: left;
  width: 35px;
  height: 35px;
  border: 1px solid #000;
}

.name {
  color: #3B63DB;
  font-size: 15px;
  margin: 0;
  padding-left: 45px;
}

.text {
  font-size: 12px;
  color: #000;
  font-family: Helvetica, 'SEGOEUIL', sans-serif;
  margin-left: 5px;
  padding-left:45px;
  margin:0;
}

Answer 2

我试过你的jsfiddle.net。

这件事对我有用：

.avatar {
  float: left;
  width: 50px;
  height: 50px;
  border: 1px solid #000;
}

.name {
  color: #3B63DB;
  font-size: 15px;
  margin-top: 0;
  padding-left: 5px;
}

.text {
  font-size: 12px;
  color: #000;
  font-family: Helvetica, 'SEGOEUIL', sans-serif;
  margin-left: 3px;
}

我已从名称和文本类中删除了float。另外，增加了宽度和宽度。头像的高度为50px。

我尝试的新代码根据您的要求运行：

.avatar {
  float: left;
  width: 35px;
  height: 35px;
  border: 1px solid #000;
}

.name {
  color: #3B63DB;
  font-size: 15px;

}

.text {
  font-size: 12px;
  color: #000;
  font-family: Helvetica, 'SEGOEUIL', sans-serif;
  margin-top:-15px;
}

文本不在文本的其他部分下面

2 个答案: