css - 响应式布局，其中左列可能会向右移动

Question

假设我们有一个包含 3 列的响应式设计(所有 3 列都是动态内容，所以我们不知道它们的高度)

对于桌面:

对于平板电脑(左列向右移动)

实现这一目标的最佳方式是什么？ (我不介意使用 flexbox 或其他现代 css 规范)

Answer 1

你可以让元素float: left在桌面上各有1/3的宽度，然后在平板电脑/手机上给它们50%的宽度并让1和3float: right 。

HTML:

<div class="b1">
  1
</div>
<div class="b2">
  2
</div>
<div class="b3">
  3
</div>

CSS:

div {
  float: left;
  width: calc(100%/3);
  box-sizing: border-box;
}

@media (max-width: 600px) {
  div {
    width: 50%;
  }
  .b1,
  .b3 {
    float: right;
  }
}

Working JSFiddle