HTML div 对齐

Question

我正在用 HTML 和 CSS 编写一个网站。对于页脚，我希望有两个对齐的“联系人”和“地址”框，其中联系人框的宽度为 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;
}