Question

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

我希望将<p class="t2">Efficiently ...</p>与text-align: right对齐，并保留t2和t3元素之间的空格。

当我使用position: absolute时，我可以使用right: 0向右移动它，但是下一个带有t3类的元素会向上移动，省略t2边距，填充等。我可以向下移动margin-down添加wrap，但我无法准确地执行此操作（保持t2和t3之间的特定距离）。

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

.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网格系统。 http://www.w3schools.com/bootstrap/bootstrap_grid_examples.asp

Answer 2

这很简单......我只使用float: right和position: relative，并且错误放置对象没有问题。

CSS相对绝对定位后

2 个答案: