CSS动态两列布局

Question

我需要使用 css 创建以下布局

===== 手机 ===== ===== 在桌面上 ======

-----[1]-----                     -----[1]-----|-----[4]-----
-----[2]-----                     -----[2]-----|-----[5]-----
-----[3]-----                      -----[3]-----|-----[6]-----
-----[4]-----
-----[5]-----
-----[6]-----

===== 移动 ==== ===== 在桌面上====

它们上面的布局 DOM 结构将按照移动布局顺序并且它是动态的，如果我从 DOM 中删除 [2] [3] 应该代替 [2] 而不是 [5]。如何创建具有这些条件的 css 布局是否可以使用 css 创建？

Answer 1

你可以CSS columns，它是专门为这样的布局意图而设计的。

CSS 列：http://jsfiddle.net/teddyrised/6bz4a0ox/

使用以下标记：

<div class="container">
    <div class="wrapper">
        <label for="">label</label>
        <input type="text" placeholder="[1]">
    </div>
    <!-- more -->
</div>

对于 CSS，我们确保声明列数（如您所愿为 2）和最小列宽。我实际上建议这样做，而不是针对移动设备和桌面设备，因为流畅/响应式布局应该迎合内容，而不是设备：

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
.container {
     -webkit-columns: 2 200px;
        -moz-columns: 2 200px;
             columns: 2 200px;
  -webkit-column-gap: 1em;
     -moz-column-gap: 1em;
          column-gap: 1em;
}
.wrapper {
  overflow: hidden;
  padding: .5em;
}
.wrapper label {
  float: left;
  width: 50px;
}
.wrapper label + input {
  float: left;
  width: calc(100% - 50px);
}