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/