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）和最小列宽。我实际上建议这样做而不是针对移动设备与桌面设备，因为 fluid/responsive 布局应该迎合内容，而不是设备：

* {
  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);
}

CSS 动态两列布局

CSS dynamic two column layout

css

layout

multiple-columns

flexbox