绝对定位后的 CSS 相对

Question

如何将元素放置在右侧，并保持后面元素的持久位置？

我想在没有 <p class="t2">Efficiently ...</p> 的情况下将 text-align: right 对齐到右侧，并保留 t2 和 t3 元素之间的空间。

当我使用 position: absolute 时，我可以使用 right: 0 将它移动到右边，但是下一个类为 t3 的元素被向上移动，省略了 t2 边距、填充等。我可以将它向下移动，将 margin-down 添加到 wrap 但我做不到这正是(保持 t2 和 t3 之间的特定距离)。

我知道相对、绝对等之间的区别。目前我正在寻找一种更好的方法来使用替代方法保持相同的效果。

.hero {
  background: #00aaff;
  padding-top: 32px;
  padding-bottom: 18px;
  color: #fff;
  position: relative;
}
.hero .wrap {
  position: relative;
  margin: 0 auto;
  min-width: 320px;
  max-width: 50%;
}
.wrap .t2 {
  margin-top: 1.625em;
  position: absolute;
  right: 0;
}
.hero .t3 {
  position: relative;
  text-align: center;
  margin-top: 10px;
}
.t3 .slogan, .t3 .phone {
  display: block;
}

<section class="hero">
  <div class="wrap">  <!-- wrapping t1, t2 -->
    <p class="t1">Lorem ipsum empowered <br>networks.</p>         <!-- align left -->
    <p class="t2">Efficiently unleash cross-media <br>ipsum.</p>  <!-- align right -->
  </div>
  <p class="t3">
    <span class="slogan">Contact with us.</span>
    <span class="phone">Call 123 456 789</span>
  </p>
</section>

Answer 1

您可以使用 Bootstrap Grid 系统。 http://www.w3schools.com/bootstrap/bootstrap_grid_examples.asp