html - CSS 内联 div 使用媒体查询做出响应

Question

我有这个 CSS 代码:

.wrap div {
    border: 1px solid #f36f25;
    width: 30%;
    float: left;
    margin:10px;
    padding:5px;
}
.clear:after {
   content: "";
   display: table;
   clear: both;
}
@media all and (max-width: 800px) {
    div.wrap div {
        width: 100%;
        float: none;
    }
}

我用它来显示内联 div 并使用媒体查询，使它们响应。

随着屏幕变小，第 3 个 div 显示在其他 div 的下方，我怎样才能让它完全响应以便它们同时显示在彼此的下方。

我还希望所有 3 个都为 width: 100%; 如果屏幕太宽，它们显示的左侧多于中心。

更新 fiddle :http://jsfiddle.net/a8k16vts/2/

我还想内联显示 3 个 div，然后在这 3 个 div 下面，第一个 div 下面有一个 div，然后是一个更大的 div 以适应第二个两个 div。像这样:http://jsfiddle.net/a8k16vts/3/

Answer 1

演示 - http://jsfiddle.net/a8k16vts/4/

使用 display:inline-block 而不是 float

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.wrap {
  text-align: center;
}
div.wrap div {
  border: 1px solid #f36f25;
  width: 29%;
  display: inline-block;
  margin: 0 5px 0 5px;
  padding: 10px;
  text-align: left;
}
@media all and (max-width: 800px) {
  div.wrap div {
    width: 100%;
    float: none;
    margin: 0px;
  }
}

<div class="wrap">
  <div>testing 1</div>
  <div>testing 2</div>
  <div>testing 3</div>
</div>