How to make elements flow from bottom to top?

前端未结

关注

 3  1000

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

相关标签:

3条回答

广开言路

2020-12-31 09:27
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
0 讨论(0)
发布评论:

提交评论
- 加载中...

鱼传尺愫

2020-12-31 09:30

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.

0 讨论(0)

别那么骄傲

2020-12-31 09:46

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.

0 讨论(0)