Question

我需要按如下方式定位div：

enter image description here

div2元素必须居中。

div3元素必须在div3完成和div2开始之间有30px的空间。

div4元素在div2完成和div4开始之间有30px的空间。

我需要一些帮助，因为我不知道如何实现这一目标。

2 个答案:

答案 0 :(得分：2)

答案 1 :(得分：-1)

Answer 1

你真的应该在html和css中添加一些尝试。但我会回答，因为你画了你想要达到的目标。

您的问题最大的问题是，您没有提供足够的信息。我认为你尝试使用给定的布局，其中3个居中的<div> s宽度未知。

您可以使用flexbox解决此问题。以下是您问题的一个可能答案：

HTML：

<div class="container">
    <div class="left">Text</div>
    <div class="center">More text</div>
    <div class="right">Some text</div>
</div>

（相关）CSS：

.container
{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

.container > div
{
    margin: 0 15px;
    flex: 0 0 auto;
}

完整演示：http://jsfiddle.net/vk4Lqvo7/1/

Answer 2

另一种选择是将div1相对置于div2，div3和amp;的绝对定位。 DIV4。这是一个简单的例子： http://jsfiddle.net/clarketm/k9tbjjoy/2/

HTML

<div id="div1">
    <div class="insideDiv" id="div2"></div>
    <div class="insideDiv" id="div3"></div>
    <div class="insideDiv" id="div4"></div>
</div>

CSS

#div1 {
    width: 100px;
    height: 100px;
    background-color: black;
    position: relative;
}

.insideDiv {
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 0;
    width: 10px;
    height: 10px;

}
#div2 {
    margin: -5px 0 0 -5px;
    background-color: green;

}

#div3 {
    margin: -5px 0 0 25px;
    background-color: red;

}

#div4 {
    margin: -5px 0 0 -35px;
    background-color: blue;

}

CSS |居中一个div并定位两个div，每侧一个

2 个答案: