如何解决如何制作一个从右到左宽度为 400px 的 div
我想让宽度为 500px 的 div 与容器 div 的右侧对齐。因此,当我应用 width: 500px 时,它会向右侧扩展,但我希望它从右向左扩展。
解决方法
如果你想要一个 flex-item 放在右边并从右向左展开,yoo 需要在 flex-container 上使用 flex-direction: row-reverse;
:
div.container {
display: flex;
flex-direction: row-reverse;
}
/* for styling purpose only */
body {
margin: 0;
}
div.container {
height: 100vh;
}
div.right {
width: 200px;
background-color: red;
}
<div class="container">
<div class="right"></div>
</div>
另一个选项是在容器上设置 direction: rtl
。您还可以将 direction: ltr
添加到您希望其中包含的项目具有正常流程的内部 div 中。 (添加关键帧仅用于视觉目的。)
.container {
direction: rtl;
height: 100vh;
width: 200px;
}
.box {
/*direction: ltr;*/
width: 100px;
height: 150px;
background-color: red;
animation: 5s grow linear infinite;
}
@keyframes grow {
from {width:25px};
to {width: 150px};
}
<div class="container">
<div class="box"></div>
</div>
#box{
float:right;
width:500px;
height:100px;
background-color: blue;
}
#holder{
border:2px solid black;
width:700px;
height:100px;
}
<div id="holder">
<div id="box"></div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。