html - 2 个 DIV 左右对齐 - 背景颜色

Question

我在一个主 DIV 中有 2 个 DIV。一个向右对齐，另一个向左对齐。如何使每个子 DIV 的背景色占屏幕宽度的 50%？另外当窗口大小调整时，当DIVS一个接一个重叠时，如何让每个DIV的背景颜色延续到窗口的边缘？

.mainDIV{
    max-width:1366px;
        padding: 0;
}
.eft-div{
    background:#333;
    float:left; 
        padding-left:10px;
}
.right-div{
    background:#ccc;
    float:right;
        padding-left:10px;
}

Answer 1

对文档有100%的控制权，至少添加:

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

然后简单地让每个 div 需要 50% 的宽度。只需为背景色添加 background-color: #hex-code。

.element {
  width:50%; 
  float:left; // use float:left to let them float next to each other.
}

就像我在 This fiddle 中使用的一样

完整的 CSS:

html, body {
  width:100%;
  height:100%;
  margin:0;
  padding:0;
}

.mainDiv {
  width:100%;
}

  .left-edge {
  float:left;
  width:50%;
  height:200px;
  background-color:blue;
}

  .right-edge {
  float:right;
  width:50%;
  height:200px;
  background-color:red;
  text-align:right;
}

注意:HTML 文档具有默认边距和填充。因此，要么使用 CSS 重置表，要么至少向正文添加 margin:0px 和 padding:0px。