How to make elements flow from bottom to top?

问题

Is there a way in CSS to get elements to behave like the picture on the right? The order of the elements isn't that important, but the tiles need to occupy the space from the bottom-up rather than top-down as the person resizes the page.

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

Sample code:

<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>

回答1:

Think outside the box:

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

Yes, this really works:

.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>

First the container is rotated 180deg to get the desired layout, then float:right flips their left/right order, and then the tiles are rotated 180deg again to look as intended.

回答2:

There's another way to do this. You can use CSS3's flex-wrap property to achieve the output you're looking for.

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

Example

回答3:

The best solution I can think of using just CSS would be to employ media queries at specific breakpoints, and to devise 2-4 (depending on how many break points you want, it could be even more) desirable configurations.

Think of the desirable configurations, then you can give your content tiles specific id's to change their styles/widths at each breakpoint. E.g.,

<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>

This technique would be fully manual, so might not work well for dynamic content unless you also wanted to leverage css-child-selectors, which for backwards compatibility might best be done using jQuery. But because, it's fully manual, it also gives you complete control over the progression.

As with Niels' solution, as presented, this wouldn't work below IE9 because media-query isn't supported.

来源：https://stackoverflow.com/questions/20644178/how-to-make-elements-flow-from-bottom-to-top

标签

css

alignment