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

【问题标题】：2 DIVs aligned right and left - background color2 个 DIV 左右对齐 - 背景颜色
【发布时间】：2014-05-16 03:57:19
【问题描述】：

我在一个主 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;
}

【问题讨论】：

你试过 width:50% 吗？允许的边距、边框等可能是一个因素，但您尝试过什么？
我们的答案应该对您的情况有所帮助。如果这些解决方案确实解决了您的问题，请对其中一个进行投票（向上三角形）和/或通过单击“检查”图标将其标记为解决方案。

标签： html css

【解决方案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。

【讨论】：

【解决方案2】：

宽度：每个 div 的 50% 和 box-sizing：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;
}

【讨论】：