如何在另一個居中的div標籤旁邊添加div標籤？

Question

我有一個垂直和水平居中的大div標籤。不，我會在旁邊添加另一個div標籤。第一個標籤不能改變其位置，只有第二個標籤必須保持50px。 以下是圖像：http://i40.tinypic.com/fk4ehh.jpg

這是我的兩個div的代碼：

.main-content{ 
    width:800px; 
    height:400px; 
    position:absolute; 
    left:50%; 
    top:50%; 
    margin:-225px 0 0 -400px; 
    background:#0A7072; 
} 
.next-slide{ 
    width:50px; 
    height:100px; 

    background:#8F1ABB; 
} 

HTML：

<div class="main-content">TEXT</div> 
<div class="next-slide">NEXT</div> 

正如你可以在圖片中看到，主要的大標籤是在中心和小標籤在它旁邊，無論頁面寬度如何，所以也許小標籤的位置必須與大標籤相對。所以它們從不重疊，第一個標籤的位置永遠不會從中心改變。

任何想法如何做到這一點？

Answer 1

首先做一個div容器，並居中

CSS

.container { 
    width:800px; 
    height:400px; 
    position:absolute; 
    left:50%; 
    top:50%; 
    margin:-225px 0 0 -400px; 
} 

HTML

<div class="container"> 
    <div class="main-content">TEXT</div> 
    <div class="next-slide">NEXT</div> 
</div> 

然後讓留下您的.main-content浮動，給你.next-slide一個position:absolute，並將其定位哪裏都行。它會一直跟隨你的'.container'

Answer 2

你想把你的下一個幻燈片div放在裏面並且完全放置它，像這樣;

.main-content{ 
    width:800px; 
    height:400px; 
    position:absolute; 
    left:50%; 
    top:50%; 
    margin:-225px 0 0 -400px; 
    background:#0A7072; 
} 
.next-slide{ 
    width:50px; 
    height:100px; 
    background:#8F1ABB; 

    position: absolute; 
    left: 50px; 
} 

<div class="main-content"> 
    TEXT 
    <div class="next-slide">NEXT</div> 
</div>