Question

我试图理解为什么＆＃34;行的背景颜色＆＃34;元素不会在平板电脑上伸展。在平板电脑上，它只出现在＆＃34;中心＆＃34;元素，而在桌面上，它也适用于＆＃34; left＆＃34;和＆＃34;对＆＃34; div的。在代码中，我把＆＃34;对＆＃34; div＆＃34; center＆＃34; div因为我想对齐＆＃34;对＆＃34; div到＆＃34; left＆＃34;手机/平板电脑上的div。

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

修改：我刚刚注意到，如果我在其right元素的媒体查询中使用clear:both;而不是float:none;。为什么呢？

＆＃13;

center

＆＃13;

.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%;
  }
}

＆＃13;

Answer 1

需要解决几个问题：

（1）您正在使用width + padding + border作为网格，最好将box-sizing: border-box设置为适用于他们，或者只是为了所有例如

* {
  box-sizing: border-box;
}

这样任何填充和边框都将作为宽度的一部分进行计算。

（2）你有<div class="clear"></div>设置在所有三个左，右和中间div之下，这是有效的。但是在媒体查询中，中心不再浮动，因此您必须在左右div之后清除浮动。您只需添加clear: both;。

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

<强> jsFiddle

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

背景颜色不随媒体查询拉伸

1 个答案: