浮動DIV左，右按鍵

Question

請注意：我已經看了幾個帖子SO和各種建議浮動並排2 div的一面，但他們都不似乎爲我工作。

的建議摘要如下：

display: inline-block 
float: left 

他人蔘考overflow: hidden，overflow: auto各種實施方案。

一個工作過，我需要確立正確的div：

position: absolute; 
right: 0px 

這是不理想的，因爲該按鈕將自身附着右側，忽略所有父容器的約束。

上面就是我想要什麼來實現的。

的左 div有藍色的背景。 右側 div包含按鈕。

我的代碼：

的Html

<div class="row"> 
       <div class="display-inline-block float-left"> 
        <h1>Your Order Schedule 
         <a id="editScheduleName" onclick="changeScheduleName()"> 
          <img class="schedule-heading small-image" src=""images/icons/edit.png"> 
         </a> 
        </h1> 
       </div> 
       <div class="display-inline-block float-right"> 
        <input id="btnScheduleStatus" type="button" class="btn button-status btn-success" value="my button"> 
       </div> 
      </div> 

的CSS 注：使用自舉的基礎，我的大部分CSS的需要

.display-inline-block { 
    display: inline-block; 
} 

.schedule-heading { 
    position: relative; 
} 

.small-image { 
    width: 30px; 
    height: 30px; 
    margin-bottom: 5px; 
} 

.button-status { 
    width: 120px; 
    height: 50px; 
    font-weight: bold; 
    font-size: 18px; 
} 

幫助將非常讚賞

Answer 1

沒有任何變化的CSS，純粹使用引導：

幾個關鍵的事情：確保您指定<div class="row">

後添加列（<div class="col-md-12">）可以使用pull-left & pull-right類浮動內容：

<div class="row"> 
    <div class="col-md-12"><!-- define columns in bootstrap --> 
     <div class="pull-left"><!-- use pull-left --> 
      <h1> 
       Your Order Schedule 
       <a id="editScheduleName" onclick="changeScheduleName()"> 
        <img class="schedule-heading small-image" src="images/icons/edit.png"> 
       </a> 
      </h1> 
     </div> 
     <div class="pull-right"><!-- use pull-right --> 
      <input id="btnScheduleStatus" type="button" class="btn button-status btn-success" value="my button"> 
     </div> 
    </div> 
</div> 

Fiddle

這比老版本的Internet Explorer不支持display:flex更好的整體瀏覽器支持。

Answer 2

.row{ 
 
    display: flex; 
 
    justify-content: space-between; 
 
    align-items: center; 
 
} 
 
.display-inline-block { 
 
    display: inline-block; 
 
} 
 

 
.schedule-heading { 
 
    position: relative; 
 
} 
 

 
.small-image { 
 
    width: 30px; 
 
    height: 30px; 
 
    margin-bottom: 5px; 
 
} 
 

 
.button-status { 
 
    width: 120px; 
 
    height: 50px; 
 
    font-weight: bold; 
 
    font-size: 18px; 
 
}

<div class="row"> 
 
    <div class="display-inline-block float-left"> 
 
    <h1>Your Order Schedule 
 
     <a id="editScheduleName" onclick="changeScheduleName()"> 
 
          <img class="schedule-heading small-image" src="images/icons/edit.png"/> 
 
         </a> 
 
    </h1> 
 
    </div> 
 
    <div class="display-inline-block float-right"> 
 
    <input id="btnScheduleStatus" type="button" class="btn button-status btn-success" value="my button"> 
 
    </div> 
 
</div>

.row{ 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
} 

嘗試使用display: flex！

您可以在谷歌搜索，你可以輕鬆地學習display: flex。