html - 2个div填充水平空间

Question

我在父包装器中有 2 个 div。我想做以下事情:

1. 这 2 个 div 共享 100% 的宽度空间，因此它们之间没有间隙，一切都是红色。

2. 当您缩小包装器时，div b 落入 div a 下面的新行(这表现得应该如此)，但在这种情况下，我希望两个 div 的宽度都是 100%，所以它们组成 2 行红色。

是否可以只使用 css(没有表格!)而不使用其他元素来做到这一点？

将包装器背景色设为红色来弥补这一点并不是解决方案。

<div class="wrapper">
    <div class="a">left</div>
    <div class="b">right</div>
</div>

http://jsfiddle.net/EAkLb/75/

Answer 1

只需将 a 和 b 的 CSS 更改为 width:50%;，添加媒体查询将它们设置为 100%在较小的视口(viewport)。

.wrapper{
  position: relative;
  max-width: 400px;   
  height:30px;
  background-color: #fff;


}
.a{
  float: left;
  background-color: red; 
  text-align: left;
  width:50%;
  height:30px;
}
.b{
  float: right;
  background-color: red; 
  text-align: right;
  width:50%;
  height:30px;

}

@media screen and (max-width: 500px) {
  .a, .b {
    width: 100%;
  }
}

<div class="wrapper">
  <div class="a">left</div>
  <div class="b">right</div>
</div>