CSS列堆叠以实现流畅布局？ [复制]答案

【问题标题】：CSS Columns stacking for fluid layout? [duplicate]CSS列堆叠以实现流畅布局？ [复制]
【发布时间】：2018-07-23 18:59:50
【问题描述】：

我有三列；左、中和右，它们位于屏幕 100% 宽度的 div 中。在媒体查询中，当屏幕尺寸减小时，如何让中间列保持在顶部，左列位于下方，然后右列位于其下方？我附上了一个 CodePen，并在下面显示了 HTML 和 CSS：https://codepen.io/Macast/pen/jZworE。任何帮助将不胜感激！我不知道该怎么做。

这就是我要找的：

HTML：

<body>
<div class="columnContainer">
    <div class="leftColumn" style="background-color:#aaa;">
      <h2>Left Column</h2>
    </div>
    <div class="middleColumn" style="background-color:#bbb;">
      <h2>Middle Column</h2>
    </div>
    <div class="rightColumn" style="background-color:#ccc;">
      <h2>Right Column</h2>
    </div>
  </div>
</body>
</html>

CSS：

* {
    box-sizing: border-box;
}

body {
    margin: 0;
}

.columnContainer {
    width: 100%;
}

.leftColumn {
    float: left;
    width: 33.33%;
    padding: 10px;
    height: 200px;
    text-align: center;
}

.middleColumn {
    float: left;
    width: 33.33%;
    padding: 10px;
    height: 200px;
    text-align: center;
}

.rightColumn {
    float: left;
    width: 33.33%;
    padding: 10px;
    height: 200px;
    text-align: center;
}

.columnContainer:after {
    content: "";
    display: table;
    clear: both;
}

/* Media Query */
@media (min-width: 320px) and (max-width: 480px) {
    /* Column Stacking Here */
}

【问题讨论】：

使用弹性盒子？ This little game 将帮助您学习创建上面想要的结果！

标签： html css media-queries multiple-columns fluid-layout

【解决方案1】：

你可以使用flex + order;

* {
    box-sizing: border-box;
}

body {
    margin: 0;
}

.columnContainer {
    width: 100%;
    display: flex;
}

.leftColumn {
    width: 33.33%;
    padding: 10px;
    height: 200px;
    margin: 0 auto;
    text-align: center;
}

.middleColumn {
    width: 33.33%;
    padding: 10px;
    height: 200px;
    margin: 0 auto;
    text-align: center;
}

.rightColumn {
    width: 33.33%;
    padding: 10px;
    height: 200px;
    margin: 0 auto;
    text-align: center;
}

/* Media Query */
@media (min-width: 320px) and (max-width: 480px) {
  /* Column Stacking Here */

  .columnContainer {
      flex-direction: column;
  }

  .leftColumn {
      order: 2;
  }

  .middleColumn {
      order: 1;
  }

  .rightColumn {
      order: 3;
  }

}

<body>
<div class="columnContainer">
    <div class="leftColumn" style="background-color:#aaa;">
      <h2>Left Column</h2>
    </div>
    <div class="middleColumn" style="background-color:#bbb;">
      <h2>Middle Column</h2>
    </div>
    <div class="rightColumn" style="background-color:#ccc;">
      <h2>Right Column</h2>
    </div>
  </div>
</body>
</html>

【讨论】：

太好了，谢谢！我以前从未使用过flex。优秀的答案。我可以看到这非常有用！我添加了宽度：100%；到媒体查询中的每一列，使其填满屏幕。

【解决方案2】：

/* Media Query */
@media (max-width: 480px) {
  .leftColumn, .middleColumn, .rightColumn {
    float: left;
    width: 100%;
    padding: 10px;
    height: 200px;
    text-align: center;
}
}

【讨论】：