如何使元素从下到上流动？ [英] How to make elements flow from bottom to top?
本文介绍了如何使元素从下到上流动？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
CSS中是否有一种方法可以使元素的行为类似于右侧的图片？元素的顺序并不重要，但是当人们调整页面大小时，图块需要从下至上而不是从上至下占据空间。
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 |
|---------| |---------|
示例代码：
<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>
推荐答案
跳出框框：
.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度再次看起来像预期的那样。
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.
这篇关于如何使元素从下到上流动？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
