Question

嘿，我无法弄清楚为什么我的div重叠，我该怎么办......

您可以在此处观看该网站：http://hersing.dk/job/

我想让携带hr的div出现在header-info div

之下

Heres是该网站的代码：

@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，height未定义relative。

您宁愿使用float定位+ clear + display: inline-block和/或.info-*同时使用{{1}}规则，一切都会好的。

Answer 2

在这种情况下，虽然非常不切实际，但解决方案是在<br> div之后添加换行符.header-info。

我再说一遍，这个解决方案不是迄今为止最好的解决方案，正如Paulie_D的评论所指出的那样，你应该改变你的定位布局方法。

Answer 3

绝对定位.container内的所有内容都会更好地定位relative。如果希望下一个元素在所有浮动元素下面开始，请使用css float:left;或float:right;来定位元素和clear:both;。在容器上使用padding和浮动元素上的边距进行定位。

同时给.container {c}类overflow:auto;来包围所有元素，而不必每次都设置height。

Answer 4

<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>


    <style>
@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 {
  width: 250px;
  height: 250px;
  padding: 4px;
  position: relative;
  top: 10%;
  left:70%;
  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: absolute;
}
#hr-1 {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
  background-color: #f1a857;
}
</style>

我认为这会解决你的问题...

我的divs重叠，我迷路了

4 个答案: