Question

我只是HTML / CSS的初学者如何阻止浮动div重叠。

HTML

<body>
  <div class="left">

  </div>
  <div class="right">

  </div>
</body>

CSS

* {
  margin: 0;
  padding: 0;
}

body {
  width: 100%;
}

.left {
  float: left;
  height: 500px;
  width: 300px;
  background: #fff;
  position: absolute;
}

.right {
  float: right;
  height: 500px;
  width: 300px;
  background: #000;
}

Answer 1

使用百分比宽度并删除绝对位置：

这是更新的CSS：

*{
  margin:0;
  padding:0;

}
body{
  width:100%;
}
.wrapper {
  width: 100%;
}
.left{
  float:left;
  height:500px;
  width:50%;
  background:#fff;
}
.right{
  float:right;
   height:500px;
  width:50%;
  background:#000;
}

我还在left div中包含了right和wrapper个div 请在此处查看：https://jsfiddle.net/2Lk13045/2/

Answer 2

您将宽度设置为固定而不是100％。

https://jsfiddle.net/2Lk13045/1/]

更改了

body{width:100%; }

到

body{width:600px; }

如何阻止我的div重叠？

2 个答案: