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

你想把你的下一个幻灯片放在里面并绝对定位，就像这样;

 .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>

如何在另一个居中的div标签旁边添加div标签？

2 个答案: