CSS 问题。如何将两个元素向右移动并将它们放在不同的 block 中？

Question

我有这个代码:

div class="plan-again-text">
  Didn't find the perfect trip? Let's plan again.
</div>

<div class="plan-again">
  <%= link_to "Let's Plan Again.", new_planner_path, class: "btn btn-primary" %>
</div>

这是我的CSS:

.plan-again {
  margin-right: 30px;
  a {
    color: #861a08
  }
}

.plan-again-text {
  font-family: 'IM Fell Great Primer', serif;
  font-size: 2em;
}

因此，如果我在两者上都使用 float right...它们最终会在同一条线上，我认为这是有道理的。我想要的是它们都在我页面的右侧并且彼此重叠。除了添加

之外还有别的吗

margin 400px?

到我的CSS？

Answer 1

同时使用 float:right 和 clear:both :

.plan-again-text, .plan-again {
  float: right;
  clear: both;
  font: 15px verdana;
  background: yellow;
}

<div class="plan-again-text">
  Didn't find the perfect trip? Let's plan again.
</div>

<div class="plan-again">
  Lorem ipsum dolor sit amet
</div>