我的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沒有定義height 。

您寧願使用relative定位+ float + clear和/或display: inline-block .info-*規則的display: inline-block ，一切都會好起來的。

Answer 2

在這種情況下，盡管非常不切實際，但解決方案是在.header-info div之后添加換行符<br> 。

我再說一遍，這種解決方案並不是目前為止最好的解決方案，正如Paulie_D的評論所指出的那樣，您應該更改定位布局方法。

Answer 3

絕對定位的.container內部的所有內容最好relative定位。 使用css float:left; 或float:right; 定位元素並clear:both; 當您希望下一個元素在所有浮動元素下方開始時。 在容器上使用padding ，在浮動元素上使用padding進行定位。

還給.container css類的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>

我認為這可以解決您的問題...