向左浮动 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注意：使用 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="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>

小提琴

这比旧版本的 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 。

Answer 3

首先，您需要为两个按钮创建一个容器 div，然后将它们作为 2 个 div 放入。 然后你可以在你的 CSS 中编写：

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

}

您不需要为其他 2 个 div 编写任何内容。