如何让元素从下到上流动？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何让元素从下到上流动？相关的知识，希望对你有一定的参考价值。
在CSS中是否有一种方法可以让元素表现得像右边的图片？元素的顺序并不重要，但是当人调整页面大小时，tile需要从下到上而不是自上而下占用空间。
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>另一答案
还有另一种方法可以做到这一点。您可以使用CSS3的flex-wrap属性来实现您正在寻找的输出。
.container{
display: flex;
flex-wrap: wrap-reverse;
}
另一答案
我可以想到使用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，因为不支持媒体查询。
以上是关于如何让元素从下到上流动？的主要内容，如果未能解决你的问题，请参考以下文章