浮动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。