html - 向左浮动 div，向右浮动按钮

Question

请注意:我看过一些 SO 帖子和并排 float 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注意:使用 bootstrap 的基础来满足我的大部分 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做任何改动，纯粹使用bootstrap:

一些关键事项:确保在指定 <div class="col-md-12"> 之后添加列 ( <div class="row"> )

您可以使用 pull-left & pull-right float 内容的类:

<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 中不受支持。