css - 背景颜色不随媒体查询拉伸(stretch)

Question

我想了解为什么“行”元素的背景颜色在平板电脑上没有拉伸(stretch)。在平板电脑上它只出现在“中心”元素中，而在桌面上它也适用于“左”和“右”div。在代码中，我将“右”div 放在“中心”div 之前，因为我想在移动设备/平板电脑上将“右”div 与“左”div 对齐。

Edit2: 我刚刚意识到真正的问题是 h3 的背景颜色center 中的标签div 应用于 left和 right分区虽然，我没有找到任何解决方案，也没有找到发生这种情况的原因。

编辑:我刚刚注意到如果我使用 clear:both;而不是 float:none;在 center 的媒体查询中它起作用的元素。为什么？

.row {
  background-color: #5c5c5c;
}
.row h3{
  background-color: #fff;
}
.left {
  width: 25%;
  float: left;
  color: #fff;
  padding: 0 10px 0 10px;
}
.right {
  width: 25%;
  float: right;
  color: #fff;
  padding: 0 10px 0 10px;
}
.center {
  width: 50%;
  float: left;
  border-left: 2px solid #eaeaea;
  border-right: 2px solid #eaeaea;
}
.clear {
  clear: both;
}
@media (max-width: 1023px) and (min-width: 768px) {
  .left {
    float: left;
    width: 50%;
  }
  .right {
    float: left;
    width: 50%;
  }
  .center {
    float: none;
    width: 100%;
  }
}

<div class="row">
  <div class="left">
    content
  </div>
  <div class="right">
    content
  </div>
  <div class="center">
    <h3>content</h3>
  </div>
  <div class="clear"></div>
</div>

Answer 1

有几个问题需要解决:

(1) 您正在使用 width + padding + border对于网格，最好设置apply box-sizing: border-box给他们，或者只是给所有人，例如

* {
  box-sizing: border-box;
}

因此任何填充和边框都将计算为宽度的一部分。

(2) 你有<div class="clear"></div>设置在所有三个左、右和中心 div 下方，这样就可以了。但是，在您的媒体查询中，中心不再 float ，因此您必须在左右 div 之后立即清除 float 。您可以只添加 clear: both; .

@media (max-width: 1023px) and (min-width: 768px) {
  .center {
    ...
    clear: both;
  }
}

jsFiddle

旁注，<h3> 上有默认边距标记，因此白色背景可能不会一直扩展到顶部和底部，您可以使用 margin: 0; 重置它并使用 padding相反，如果你确实需要间距。