Question

CSS中有没有办法让元素表现得像右边的图片？元素的顺序并不重要，但是当人调整页面大小时，瓷砖需要从下到上而不是自上而下占据空间。

  NORMAL         DESIRED
|---------|    |---------|
| A B C D |    | I       |
| E F G H |    | E F G H |
| I       |    | A B C D |
|---------|    |---------|

示例代码：

<html>
    <head>

      <style>
        .container {
          margin:10px;
          border:1px solid black;
          float:left;
        }

        .tile {
          width:100px;
          height:100px;
          border:1px solid black;
          margin:5px;
          float:left;
          font-size: 50px;
          text-align: center;
          line-height: 100px;
          vertical-align: middle; 
        }

      </style>

    </head>
    <body>
        <div id="container-1" class="container">
          <span class="tile">1</span>
          <span class="tile">2</span>
          <span class="tile">3</span>
          <span class="tile">4</span>
          <span class="tile">5</span>
          <span class="tile">6</span>
          <span class="tile">7</span>
          <span class="tile">8</span>
          <span class="tile">9</span>
        </div>
    </body>
</html>

Answer 1

在盒子外面思考：

.container, .tile {
    transform:rotate(180deg);         /* Moz and IE10+ */
    -ms-transform:rotate(180deg);     /* IE9 */
    -webkit-transform:rotate(180deg); /* Opera/Chrome/Safari */
}

是的，这确实有效：

.container {
  margin:10px;
  border:1px solid black;
  float:left;
  transform:rotate(180deg);
}
.tile {
  width:100px;
  height:64px;
  border:1px solid black;
  margin:5px;
  float:right;
  font-size: 40px;
  text-align: center;
  line-height: 64px;
  vertical-align: middle; 
  transform:rotate(180deg);
}

<div id="container-1" class="container">
  <span class="tile">1</span>
  <span class="tile">2</span>
  <span class="tile">3</span>
  <span class="tile">4</span>
  <span class="tile">5</span>
  <span class="tile">6</span>
  <span class="tile">7</span>
  <span class="tile">8</span>
  <span class="tile">9</span>
</div>

首先将容器旋转180度以获得所需的布局，然后float:right翻转它们的左/右顺序，然后将瓷砖再次旋转180度以使其看起来像预期的那样。

Answer 2

还有另一种方法可以做到这一点。您可以使用CSS3的flex-wrap属性来获得您正在寻找的输出。

.container{
    display: flex;
    flex-wrap: wrap-reverse;
}

Example

Answer 3

我能想到使用CSS的最佳解决方案是在特定断点处使用media queries，并设计2-4（取决于您想要多少个断点，甚至可能更多）

考虑所需的配置，然后您可以为内容切片指定特定的ID，以便在每个断点处更改其样式/宽度。例如，

<head>

  <style>
    .container {
      margin:10px;
      border:1px solid black;
      float:left;
    }

    .tile {
      width:100px;
      height:100px;
      border:1px solid black;
      margin:5px;
      float:left;
      font-size: 50px;
      text-align: center;
      line-height: 100px;
      vertical-align: middle; 
    }
@media all and (max-width: 699px) and (min-width: 520px) {
  #tileOne {
    width: 100%;
  }
  #tileTwo {
    width: 50%;
  }
}
  </style>

</head>
<body>
    <div id="container-1" class="container">
      <span class="tile" id="tileOne">1</span>
      <span class="tile" id="tileTwo">2</span>
      <span class="tile">3</span>
      <span class="tile">4</span>
      <span class="tile">5</span>
      <span class="tile">6</span>
      <span class="tile">7</span>
      <span class="tile">8</span>
      <span class="tile">9</span>
    </div>
</body>

这种技术是完全手动的，因此可能不适用于动态内容，除非您还想利用css-child-selectors，为了向后兼容性最好使用jQuery。但是因为它完全是手动的，它还可以让你完全控制进展。

与Niels的解决方案一样，如图所示，这不适用于IE9，因为不支持媒体查询。

如何让元素从下到上流动？

3 个答案: