0

私のテキストは、テキストのこの部分の下に入りたくないようです! 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/

4

2 に答える 2

0

作業中の編集

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;
}
于 2013-10-13T17:27:01.063 に答える
0

私はあなたの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;
}
于 2013-10-13T17:42:39.560 に答える