html - 文本不在文本的其他部分下方

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