当所述 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>并排对齐？

它目前的样子的例子。基本上，我想将第二<div>放在第一的左边缘下方。

Answer 1

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

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

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