HTML div-aligning

Question

我正在用HTML和CSS编写一个网站。对于页脚，我希望有2个框用于“联系”和“地址”对齐，联系人框具有25％的宽度，地址框具有其余部分。不知何故，我的div不能正确排列，地址框不会与顶部垂直对齐。

我的魅力：

.footer {
  margin-top: 5px;
  width: 100%;
  border: 1px solid black;
}

.anschrift {
  width: 25%;
  padding: 5px;
  display: inline-block;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  vertical-align: top;
}

.kontakt {
  width: 70%;
  margin-left: 28%;
  display: inline-block;
  padding: 4px;
  vertical-align: top;
}

<div class="footer">
  <div class="anschrift">
    <h2>
      Anschrift:
    </h2>
    <h3>
      Lorem ipsum...
    </h3>
  </div>
  <div class="kontakt">
    <h2>
      Kontakt:
    </h2>
    <h3>
      Lorem ipsum...
    </h3>
  </div>
</div>

Answer 1

.footer {
  margin-top: 5px;
  width: 100%;
  border: 1px solid black;
}

.anschrift {
  width: 25%;
  padding: 5px;
  display: inline-block;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  vertical-align: top;
}

.kontakt {
  width: 70%;
  display: inline-block;
  padding: 4px;
  vertical-align: top;
  float:right;
}

<div class="footer">
  <div class="anschrift">
    <h2>
      Anschrift:
    </h2>
    <h3>
      Lorem ipsum...
    </h3>
  </div>
  <div class="kontakt">
    <h2>
      Kontakt:
    </h2>
    <h3>
      Lorem ipsum...
    </h3>
  </div>
</div>

删除左边距并在.kontakt中将div浮动到右边，即将.kontakt的代码更改为

.kontakt {
  width: 70%;
  display: inline-block;
  padding: 4px;
  vertical-align: top;
  float:right;
}

Answer 2

它是接触块的左边距，这使得块比你想要的大。只需删除边距（或缩小边距）。

＆＃13;

＆＃13;

.footer {
  margin-top: 5px;
  width: 100%;
  border: 1px solid black;
}

.anschrift {
  width: 25%;
  padding: 5px;
  display: inline-block;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  vertical-align: top;
}

.kontakt {
  width: 70%;
  //margin-left: 28%;
  display: inline-block;
  padding: 4px;
  vertical-align: top;
}

＆＃13;

<div class="footer">
  <div class="anschrift">
    <h2>
      Anschrift:
    </h2>
    <h3>
      Lorem ipsum...
    </h3>
  </div>
  <div class="kontakt">
    <h2>
      Kontakt:
    </h2>
    <h3>
      Lorem ipsum...
    </h3>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

.kontakt:margin-left: 28%;迫使换行为25％+ 28％+ 70％超过100％

Answer 4

实际上，如果你在块中使用边距，那么你必须从其他块/ html div减少相同的宽度。

所以我更喜欢使用padding而不是margi n来在多列的两个之间建立间距，并且在使用填充时必须使用 box-sizing 。

box-sizing:border-box