html - 图像上的两个 float div

Question

好吧，我得到了 1 个向左浮动的 div 和一个向右浮动的 div，现在由于某种原因我无法让它们移动到它们应该在的一侧。他们现在有点重叠了

* {
  margin: 0;
  padding: 0;
  font-family: 'Lato', sans-serif;
}

html, body {
  width: 100%;
  height: 100%;
}

#main  {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

#main img {
  width: 100%;
  height: 100%;
}

#page_left, #page_right {
  width: 50%;
  height: 100%;
  background-color: red;
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 1000;
}

<div id="main">
  <img src="img/background.jpg"/>
  <div id="page_left"></div>
  <div id="page_right"></div>
</div>

我也尝试过使用显示内联 block 的方法，但效果不佳

Answer 1

用你的附加 CSS 试试这个

CSS

#page_left, #page_right {
    width: 50%;
    height: 100%;
    background-color: red;
    position: absolute;
    top: 0px;
    z-index: 1000;
}

#page_left {
    left: 0;
}

#page_right {
    right: 0;
}