Question

我需要使用css

创建以下布局

===== MOBILE ===== ===== ON DESKTOP ======

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

===== MOBILE ==== ===== ON DESKTOP ====

他们上面的布局DOM结构将按照移动布局顺序进行，并且它也是动态的，如果我从DOM [3]中移除[2]应该取代[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);
}

Answer 2

您可以使用Google Web Developers的this指南。似乎做你想做的事。

CSS动态两列布局

2 个答案: