绝对定位后的CSS相对答案

【问题标题】：CSS relative after absolute positioning绝对定位后的CSS相对
【发布时间】：2016-03-02 23:34:11
【问题描述】：

如何将元素放置在右侧，并保持后续元素的位置不变？

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

当我使用position: absolute 时，我可以使用right: 0 将其向右移动，但具有t3 类的下一个元素向上移动，省略t2 边距、填充等。我可以将其向下移动添加@987654329 @ 到wrap 但我不能精确地做到这一点（保持t2 和t3 之间的特定距离）。

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

.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>

【问题讨论】：

标签： css css-position

【解决方案1】：

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

【讨论】：

我不想使用引导程序。这应该是改进我的代码以达到相同效果并保持网站排列的方式。

【解决方案2】：

太简单了...我只是用float: right 和position: relative 并没有错误放置对象的问题。

【讨论】：