html – 将书写模式/文字方向设置为自下而上
发布时间:2020-12-14 18:36:50 所属栏目:资源 来源:网络整理
导读:我找不到一个解决方案,让绿色元素从容器的右下角开始,就像右图(“需要”)一样. CSS是否提供了一种从底部对齐/定向元素的方法? 图示了“默认”和“需要”元素的位置. SNIPPET .cnt { width:200px; height:300px; border:1px solid green; text-align:center;
我找不到一个解决方案,让绿色元素从容器的右下角开始,就像右图(“需要”)一样.
CSS是否提供了一种从底部对齐/定向元素的方法? 图示了“默认”和“需要”元素的位置. 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> 解决方法
令人惊讶的是,在水平书写模式下,它并没有出现. 有各种属性,包括书写模式,方向,文本方向和弹性方向,允许您重新排列内容流. 但是它们似乎都没有允许从右下角开始以水平书写模式布置内容.也许有人可以纠正我. 同时,这是一个黑客(纯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://jsfiddle.net/o7hr07k6/ (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |