html - CSS - 使列中的多个 div 回绕

Question

假设我有三个 div - 红绿蓝，具有以下基本标记和样式:https://jsfiddle.net/ar8sn1o6/

<div class="red">Red</div>
<div class="green">Green</div>
<div class="blue">Blue</div>

.red, .green, .blue {
  display: inline-block;
  float: left;
  margin: 1%;
  width: 48%;
}

.red {
  background: red;
  height: 50px;
}

.green {
  background: green;
  height: 100px;
}

.blue {
  background: blue;
  height: 50px;
}

但我想在桌面上显示为两栏，在移动设备上显示为一栏，如 this . 虽然使用红色 -> 蓝色 -> 绿色移动布局相当简单，但我需要改为使用红色 -> 绿色 -> 蓝色布局

这是否可以不复制任何 HTML？

Answer 1

可以使用媒体查询

查看这篇文章以了解更多信息:https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

Syntax

Media queries consist of an optional media type and can, as of the CSS3 specification, contain zero or more expressions, expressed as media features, which resolve to either true or false. The result of the query is true if the media type specified in the media query matches the type of device the document is being displayed on and all expressions in the media query are true.

请参阅下面的代码片段。调整它的大小以查看它的工作情况!

.red, .green, .blue {
  display: inline-block;
  float: left;
  margin: 1%;
  width: 48%;
}

.red {
  background: red;
  height: 50px;
}

.green {
  background: green;
  height: 100px;
}

.blue {
  background: blue;
  height: 50px;
}

@media (max-width: 400px) {
  .red, .green, .blue {
    display: block;
    width: 100%;
  }
}

<div class="red">Red</div>
<div class="green">Green</div>
<div class="blue">Blue</div>

更新

仅使用 CSS 无法实现您想要实现的目标。我会尝试解释为什么不这样做。

当您使用 float: left 或 display: inline-block 设置元素样式时。它们的父元素具有最高 child 的 height。因此，插入新行的每个新 block 都将对齐到最高的前一个 child 的底部。

因此无法按照您的意愿对齐它们。但是，您可以在其周围包裹一个 div。然后只需添加 float: left; 或 display: inline-block。请参阅此示例: https://jsfiddle.net/ar8sn1o6/2/

注意:

When using float, the parent element will lose its height. You can fix this by adding overflow: hidden to the parent element.

Or use clearfix. See: https://css-tricks.com/snippets/css/clear-fix/