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>对齐？

Example目前的样子。基本上我想把第二个{{1}}放在第一个{{1}}沿着它的左边缘。

Answer 1

你需要为第二个div分配相同的宽度，并给它自动边距，如下所示：

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

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

当所述div使用自动定位时，如何在div上方的div边缘对齐div？

1 个答案: