Question

我试图把这个段落放在标题下面（h4）。两者都向左浮动，文本左对齐。然而，它仍然最终成为中心。我们（我们的团队）完成了测试，标签不是问题。

<center><div id="content">
                                                                <!-- <p>hi.</p> -->
  <div class="postStarter">

  </div>
  <div class="post">
    <img src="person.png" class="avatar-entry"><a href="profiles/2-thomas"><h4 class="postAuthor">Ranger Thomas A.</h4></a>
    <br />
    <br />
      <p class="postText">UNIX-BASED.</p>
  </div>
  <div class="post">
    <img src="person.png" class="avatar-entry"><a href="profiles/2-thomas"><h4 class="postAuthor">Ranger Thomas A.</h4></a>
    <br />
    <br />
      <p class="postText">Living the Mac life.</p>
  </div>
</div>

这是CSS：

.postStarter {
  background: #FFF;
  border-bottom: 1px solid #E0E0E0;
  width: 500px;
  height: 100px;
}

.post {
 background: #FFF;
 border-bottom: 1px solid #E0E0E0;
 width: 500px;
 height: 100px;
}

.postText {
  float: left;
  text-align: left;
}

#content {
  width: 1000px;
  height: 900px;
  background: #FFF;
  border-left: 1px solid #E0E0E0;
  border-right: 1px solid #E0E0E0;
  border-top: .5px solid #FFF;
  border-bottom: none;
}

有关如何解决此问题的任何想法？ http://i.redsroom.info/npPO

Answer 1

尝试在che“p”标签之前加上“clear div”，如下所示：

<div class="post">
<img src="person.png" class="avatar-entry"><a href="profiles/2-thomas"><h4 class="postAuthor">Ranger Thomas A.</h4></a>
<br />

<div class="clear"></div>
  <p class="postText">UNIX-BASED.</p>

Answer 2

如果没有看到你的文档，很难说清楚你的html中引用的所有类都可以在你的CSS片段和你的doc类型等中看到。

也许看看如果你从.postText中删除左边的浮动会发生什么，因为你没有在此之后清除，这可能会导致一些不适当的影响。

使用JS Bin更容易看到问题

如何将此文本放在其他文本下面？

2 个答案: