在使用顯示器時將div對齊到右側：flex

爲了讓他們在同一條線上，我使用display: flex所有div。

但是，這禁止我在右邊div上使用float:right。

我想是將「我的按鈕」分區屏幕

<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/

來源

2017-08-25 David

<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

來源

2017-08-25 12:32:48 zynkn

你只需要使用可用的定位性質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>

來源

2017-08-25 12:34:50

在使用顯示器時將div對齊到右側：flex

回答

相關問題