绝对定位后的CSS相对

如何将元素放置在右侧，并保持以下元素的持久位置？绝对定位后的CSS相对

我要对齐<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>

来源

2016-03-02 rafr3

您可以使用引导网格系统。 http://www.w3schools.com/bootstrap/bootstrap_grid_examples.asp

来源

2016-03-02 10:28:20

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

这很容易......我只是用float: right与position: relative，并且没有错误的对象放置问题。

来源

2016-03-02 15:34:11 rafr3

绝对定位后的CSS相对

回答

相关问题