在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>
Nie*_*jes 24
创造性思考:
.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度以使其看起来像预期的那样.
Llo*_*nks 11
还有另一种方法可以做到这一点.您可以使用CSS3的flex-wrap属性来实现您正在寻找的输出.
.container{
display: flex;
flex-wrap: wrap-reverse;
}