我找不到一个解决方案,让绿色元素从容器的右下角开始,就像右图(“需要”)一样.
图示了“默认”和“需要”元素的位置.
SNIPPET
.cnt {
width:200px;
height:300px;
border:1px solid green;
text-align:center;
display: table-cell;
vertical-align: bottom;
}
.itm {
transform: translate(0px,0px) scale(1);
display: inline-block;
padding:10px;
width:20px;
margin:10px;
background: green;
color: white;
transition:transform 0.5s;
}
.itm:hover {
transform: translate(0px,-3px) scale(1.1);
}
<div class="cnt"> <div class="itm">1</div> <div class="itm">2</div> <div class="itm">3</div> <div class="itm">4</div> <div class="itm">5</div> <div class="itm">6</div> <div class="itm">7</div> <div class="itm">8</div> </div>
解决方法
Does CSS provide a way to align/orient elements from the bottom?
令人惊讶的是,在水平书写模式下,它并没有出现.
有各种属性,包括书写模式,方向,文本方向和弹性方向,允许您重新排列内容流.
但是它们似乎都没有允许从右下角开始以水平书写模式布置内容.也许有人可以纠正我.
同时,这是一个黑客(纯CSS)：
.cnt {
display: flex;
flex-direction: row-reverse;
flex-wrap: wrap;
align-items: flex-start;
align-content: flex-start;
justify-content: center;
text-align: center;
width: 200px;
height: 300px;
border: 1px solid green;
transform: scaleY(-1);
}
.itm {
padding: 10px;
width: 20px;
margin: 10px;
background: green;
color: white;
transform: translate(0px,0px) scaleY(-1) scaleX(1);
transition: transform 0.5s;
}
.itm:hover {
transform: translate(0px,-3px) scaleY(-1.1) scaleX(1.1);
}
<div class="cnt"> <div class="itm">8</div> <div class="itm">7</div> <div class="itm">6</div> <div class="itm">5</div> <div class="itm">4</div> <div class="itm">3</div> <div class="itm">2</div> <div class="itm">1</div> </div>
