两个带有底层图像的独立 DIV 不会浮动到右侧

我想将页面分为一半。在一侧，有一个带有蓝色透明覆盖的计算机监视器的图像。当徘徊时，这将变得更加明亮。右侧也有不同的图像（音乐手稿）。但是，这在实践中不起作用，只是倒在左侧的一个Div块上。

代码：

html, body {
  background-color: black;
  height: 100%;
  width: 100%;
  margin: 0%;
}
div.leftImage {
  /*Set up positioning:*/
  display: block;
  float: left;
  width: 50%;
  height: 100%;
  z-index: 0;
  position: absolute;
  /*Set up the background:*/
  background-image: url("https://images.pexels.com/photos/270360/pexels-photo-270360.jpeg?w=940&h=650&dpr=2&auto=compress&cs=tinysrgb");
  background-position: 45%;
}
div.rightImage {
  /*Set up positioning:*/
  display: block;
  float: right;
  width: 50%;
  height: 100%;
  position: absolute;
  z-index: 0;
  /*Set up the background:*/
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/9/9d/BWV605.png");
  background-position: center;
}
div.left {
  /*Set up positioning:*/
  display: block;
  float: left;
  width: 50%;
  height: 100%;
  position: absolute;
  z-index: 1;
  /*Set up the background:*/
  background-color: rgba(0, 150, 255, 0.5);
  transition: background-color 0.25s ease;
}
div.left:hover {
  background-color: rgba(0, 150, 255, 0.8);
}
div.right {
  /*Set up positioning:*/
  display: block;
  float: right;
  width: 50%;
  height: 100%;
  position: absolute;
  z-index: 1;
  /*Set up the background:*/
  background-color: rgba(204, 0, 0, 0.5);
  transition: background-color 0.25s ease;
}
div.right:hover {
  background-color: rgba(204, 0, 0, 0.8);
}

<!DOCTYPE html>
<html>
<body>
  <div class="leftImage">
  </div>
  <div class="rightImage">
  </div>
  <div class="right">
    <p>Test.</p>
  </div>
  <div class="left">
    <p>Test.</p>
  </div>
</body>
</html>

预先感谢。

如果您使用的是 position: absolute，则诸如 float: left之类的布局属性将没有任何效果。

相反，使用top，left，right和bottom属性控制绝对位置元素：

html, body {
  background-color: black;
  height: 100%;
  width: 100%;
  margin: 0%;
}
div.leftImage {
  /*Set up positioning:*/
  z-index: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 50%;
  bottom: 0;
  /*Set up the background:*/
  background-image: url("https://images.pexels.com/photos/270360/pexels-photo-270360.jpeg?w=940&h=650&dpr=2&auto=compress&cs=tinysrgb");
  background-position: 45%;
}
div.rightImage {
  /*Set up positioning:*/
  z-index: 0;
  position: absolute;
  top: 0;
  left: 50%;
  right: 0;
  bottom: 0;
  /*Set up the background:*/
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/9/9d/BWV605.png");
  background-position: center;
}
div.left {
  /*Set up positioning:*/
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  right: 50%;
  bottom: 0;
  /*Set up the background:*/
  background-color: rgba(0, 150, 255, 0.5);
  transition: background-color 0.25s ease;
}
div.left:hover {
  background-color: rgba(0, 150, 255, 0.8);
}
div.right {
  /*Set up positioning:*/
  z-index: 1;
  position: absolute;
  top: 0;
  left: 50%;
  right: 0;
  bottom: 0;
  /*Set up the background:*/
  background-color: rgba(204, 0, 0, 0.5);
  transition: background-color 0.25s ease;
}
div.right:hover {
  background-color: rgba(204, 0, 0, 0.8);
}

<!DOCTYPE html>
<html>
<body>
  <div class="leftImage">
  </div>
  <div class="rightImage">
  </div>
  <div class="right">
    <p>Test.</p>
  </div>
  <div class="left">
    <p>Test.</p>
  </div>
</body>
</html>

只是避免浮动的另一种简单选择。利用Flexbox，您无需浮动或位置元素。希望，它会有所帮助：）

html,
body {
  background-color: black;
  height: 100%;
  width: 100%;
  margin: 0;
}
.fc {
  display: flex;
  width: 100%;
  height: 100%;
}
.leftImage {
  width: 50%;
  background-image: url("https://images.pexels.com/photos/270360/pexels-photo-270360.jpeg?w=940&h=650&dpr=2&auto=compress&cs=tinysrgb");
  background-position: 45%;
}
.rightImage {
  width: 50%;
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/9/9d/BWV605.png");
  background-position: center;
}
div.left {
  width: 50%;
  height: 100%;
  position: absolute;
  background-color: rgba(0, 150, 255, 0.5);
  transition: background-color 0.25s ease;
}
div.left:hover {
  background-color: rgba(0, 150, 255, 0.8);
}
div.right {
  width: 50%;
  height: 100%;
  position: absolute;
  background-color: rgba(204, 0, 0, 0.5);
  transition: background-color 0.25s ease;
}
div.right:hover {
  background-color: rgba(204, 0, 0, 0.8);
}
}

<div class="fc">
  <div class="leftImage">
    <div class="left">
      <p>Test.</p>
    </div>
  </div>
  <div class="rightImage">
    <div class="right">
      <p>Test.</p>
    </div>
  </div>
</div>

相关内容

最新更新

热门标签：