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添加到正文中。

Answer 2

宽度：每个div和box-sizing的50％：border-box。这是代码：

<div class="mainDIV">
    <div class="left-div">A</div>
    <div class="right-div">B</div>
</div>

.mainDIV {
    max-width:1366px;
    padding: 0;
    box-sizing: border-box;
}
.left-div {
    background:#333;
    float:left;
    padding-left:10px;
    width:50%;
    box-sizing: border-box;
}
.right-div {
    background:#ccc;
    float:right;
    padding-left:10px;
    width:50%;
    box-sizing: border-box;
}

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

2 个答案: