html - 当 div 使用自动定位时，如何将 div 与其上方的 div 边缘对齐？

Question

我有一个<div> :

<div id="placeHolder" class="card"><h1> A title!</h1><p>Some text!</p> </div>  

还有第二个<div>包含一些文本和 <form> :

  <div id="inputFields"><h4 class="header middle">edit</h4>
      <div id="inputs"> 
          <form id="form-inputs"><br>
              Label <input class="input" type="text"> Label <input class="input" type="text"><br>
              Label <input class="input" type="text"> Label <input class="input" type="text"><br>
              Label <input class="input" type="text"> Label <input class="input" type="text"><br>
          </form>
      </div>
  </div>

我正在使用 CSS 自动将第一个 div 居中在页面上我想要的位置:

.card {
width: 850px;
height: 350px;
margin-left: auto;
margin-right: auto;
margin-top: 150px;
left: auto;
top: auto; 
background-color: lightgrey;
}

这很棒，因为 <div>在保持自身居中方面做得相当好。不过我现在想对齐第二个 <div>与第一个一样，使其位于其左边缘的正下方。

这就是我不知道该怎么做的原因。我尝试设置第二个 <div>至:

#inputFields {
    left: auto;
    top: auto;
}

但这行不通。我不知道为什么，但我猜这是因为我没有手动设置高度和宽度。

如何对齐这两个 <div>彼此相邻吗？

Example目前的样子。基本上我想定位第二个 <div>在其左边缘第一个下方。

Answer 1

您需要为第二个 div 分配相同的宽度，并为其设置自动边距，如下所示:

#inputFields {
    margin:0 auto;
    width: 850px;
}

http://jsfiddle.net/LHkhG/embedded/result/