絕對定位後的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相對

回答

相關問題