html - 我的 div 重叠，我迷路了

Question

嘿，我不知道为什么我的 div 重叠以及我应该做什么...

您可以在这里观看网站:http://hersing.dk/job/

我希望携带 hr 的 div 出现在 header-info div 的下方

这是网站的代码:

@font-face {
  font-family: hersing;
  src: url(lmroman10-regular.otf);
}
html,
body {
  font-family: hersing;
  height: 100%;
  margin: 0px;
}
.container {
  width: 90%;
  height: 90%;
  left: 5%;
  top: 5%;
  background: green;
  position: absolute;
  display: block;
  clear: both;
}
.info-name {
  left: 5%;
  top: 10%;
  position: absolute;
  display: block;
}
.info-picture {
  min-width: 250px;
  min-height: 250px;
  padding: 4px;
  position: absolute;
  top: 10%;
  right: 5%;
  background: black;
  display: block;
}
.info-picture img {
  height: 100%;
  width: 100%;
}
#info-header {
  font-size: 400%;
}
#info-title {
  font-size: 150%;
  font-weight: bold;
}
.header-info {
  display: block;
  padding: 20px;
  position: relative;
  width: 100%;
}
.stang-1 {
  display: block;
  width: 100%;
  color: blue;
  position: relative;
}
#hr-1 {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
  background-color: #f1a857;
}

<div class="container">
  <div class="header-info">
    <div class="info-name" id="info-name">
      ...
    </div>
    <div class="info-picture" id="info-picture">
      <img src="images/picture.png" />
    </div>
  </div>
  <div class="stang-1" id="stang-1">
    <hr id="hr-1">
  </div>
</div>

我希望有人能解决这个问题，因为我迷路了

Answer 1

.info-name 和.info-picture 都是absolute 定位的，.header-info 有未定义高度。

您宁愿使用relative 定位 + float + clear 和/或 display: inline-block对于 .info-* 规则，一切都会好起来的。