Question

我基本上有3个主要的div：外部div，第一个div和第二个div。

<div class = "outer">
    <div class = "first">

    </div>

    <div class = "second">

    </div>
</div>

我目前使用的唯一CSS是第一个div：

.first {
    position: fixed;
    right: 0;
    left: 0;
    margin-right: auto;
    margin-left: auto;
    min-height: 14em;
    width: 46%;
    top: 5em;
}

因为最初我只专注于居中第一个div。我没有提前思考并计划创建第二个div。

无论如何，第二个div当前显示在第一个div的左上角，我希望它在第一个div下方显示，同时水平居中，但我不知道这样做。我已经尝试添加一个明确的：两者都希望它和＃34;清除＆＃34;第一个div，它可以移动到它下面，但是没有用。

Answer 1

试试这个：

.first {
        margin-right: auto;
        margin-left: auto;margin-top:0.3em;
        min-height: 14em;
        width: 46%;
        background: red;
    }
    .second{margin-right: auto;
        margin-left: auto;
        min-height: 14em;margin-top:0.3em;
        width: 46%;background: blue;}

Answer 2

你不需要在第一个div上有一个“position：fixed”。如果由于某种原因你确实需要修复div，你可以将它添加到最外面的“外部”div。我在codepen中做了一个快速笔，并将工作代码放在下面。

.outer{

position:fixed;
width:100%;
}

.first {
margin:auto;
min-height: 14em;
width: 46%;
top: 5em;
}

.second{
 width:46%;
 height:50px;
 margin:auto;
 }

Answer 3

目前尚不清楚你是否有意使用position: fixed，但我会假设你是在运作。

使用flexbox：

HTML

<div class="outer">
  <div class="first">
  </div>
  <div class="second">
  </div>
</div>

CSS

.outer {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.first, .second {
  height: 200px;
  width: 50vh;
}

.first {
  position: fixed;
  background-color: blue;
}

.second {
  margin-top: 200px;
  background-color: red;
}

Fiddle

如何将div放在居中的div下方？

3 个答案: