[英]align div to the right while using display:flex
我有主要股利和2股利。
为了使它们保持同一行,我对所有div使用display: flex
。
但这禁止我在正确的div上使用float:right
。
我想要的是将“我的按钮” div移动到屏幕右侧
<div style="border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: gray;height:30px;"> <div style="float:left;line-height:30px;">Contact Details</div> <button type="button" class="edit_button" style="float: right;">My Button</button> </div>
这是小提琴: http : //jsfiddle.net/xQgSm/
您只需要使用flexbox中可用的对齐属性
.container { border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: gray; height: 30px; display: flex; align-items: center; /* center vertically */ justify-content: space-between; /* maximum space between items*/ }
<div class="container"> <div>Contact Details</div> <button type="button" class="edit_button">My Button</button> </div>
或者..
.container { border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: gray; height: 30px; display: flex; align-items: center; } .edit_button { margin-left: auto; /* align to right */ }
<div class="container"> <div>Contact Details</div> <button type="button" class="edit_button">My Button</button> </div>
<div style="display:flex;justify-content:space-between;border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: gray;height:30px;"> <div style="float:left;line-height:30px;">Contact Details</div> <button type="button" class="edit_button" style="">My Button</button> </div>https://stackoverflow.com/questions/45881495/align-div-to-the-right-while-using-displayflex#
试试这个justify-content:space-between
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.