无法将 P 置于 H1 以下

Question

我试图将 P 文本放在 H1 header 下方，但它似乎将 P 文本集中在 H1 div 的右侧。见下图：

我想要样本下方的 "Sample Text" Header Link”。有什么想法吗？

下面的代码...

.col_3 #blue_box {
  float: left;
  background-color: #005ea5;
  width: 30%;
}

.col_3 #blue_box,
.col_3 #text {
  display: block;
}

<div class="col_3">
  <div id="blue_box">
    <h1><a href="#">Sample Header Link</a></h1>
  </div>

  <div id="text">
    <p>Sample Text. Sample Text</p>
  </div>
</div>

Answer 1

把这个放在你的 div

.col_3 #blue_box {
  float: left;
  background-color: #005ea5;
  width: 30%;
}

.col_3 #blue_box,
.col_3 #text {
  display: block;
}

<div class="col_3">
  <div id="blue_box">
    <h1><a href="#">Sample Header Link</a></h1>
  </div>

  <div id="text" style="clear: both;">
    <p>Sample Text. Sample Text</p>
  </div>
</div>

这将解决您的问题

 <div style="clear: both;">

无法将 P 置于 H1 以下

Trouble placing P below H1

html

css

paragraph