Question

我正在创建一个表单，我有2个divs并排。这是我目前的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

只需使用浮动（当然也可以使用媒体查询）。

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

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

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

这是fiddle

Answer 2

@media screen and (max-width:600px){
  .input-thick { width: 100%; }
}

如果您想要响应式CSS，则应使用媒体查询。

CSS - Side by Side div等宽，但在平板电脑尺寸占用全屏

2 个答案: