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需求中使用bootstrap基础

.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

＆＃13;

>> floor ans*ans

ans =  97   110   115    42    97   110   115

>> ceil ans*ans

ans =  97   110   115    42    97   110   115

＆＃13;

.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;
}

＆＃13;

<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; }！

您可以在Google中搜索，轻松学习display: flex。

Answer 2

没有对css进行任何更改，纯粹使用bootstrap：

几个关键事项：确保在指定<div class="col-md-12">

后添加列（<div class="row">）

您可以使用pull-left＆amp; 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

这提供了比display:flex更好的整体浏览器支持，旧版Internet Explorer不支持此版本。

浮动div左，右按钮

2 个答案: