html - CSS - 并排 div 等宽，但平板电脑大小占据全屏

Question

我正在创建一个表单，我有 2 个并排的 div。这是我当前的 html:

  <div class="form-row-fluid">
    <div class="form-field">
      <label>First name</label>
      <input class="input-thick">
      </input>
    </div>
    <div class="form-field">
      <label>Middle name</label>
      <input class="input-thick">
      </input>
    </div>
  </div>

和CSS:

.form-row-fluid {
  width: 100%;
  display: inline;
}
.form-field {
  width: 46%;
}

我看过另一个说要使用 display: table 的答案，但我无法让它像我需要的那样响应。当我达到平板电脑大小时，我希望每个 form-field 都转到 width: 100%。我做错了什么？

Answer 1

只需使用 float (当然还有媒体查询)。

.form-row-fluid {
    width: 100%;    
}

.form-field {
    width: 46%;
    float: left;
    display: block;
}

@media screen and (max-width:768px){
    .form-field { width: 100%; }
}

这是 fiddle