无法将P置于H1以下

Question

我正在尝试将P文本放在H1标头下方，但是似乎将P文本聚集在H1 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">
    <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;">