我找不到一个解决方案,让绿色元素从容器的右下角开始,就像右图(“需要”)一样.
图示了“默认”和“需要”元素的位置.
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>
原文地址:https://www.jb51.cc/html/225810.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。