如何在另一个居中的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>