浮动DIV左,右按键
问题描述:
请注意:我已经看了几个帖子SO和各种建议浮动并排2 div的一面,但他们都不似乎为我工作。浮动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;
}
帮助将非常赞赏
答
没有任何变化的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>
这比老版本的Internet Explorer不支持display:flex
更好的整体浏览器支持。
答
.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
。
退房CSS'flexboxes'; 'display:flex; justify-content:space-between'可以解决你的问题。 –
你的行应该是100%的宽度,并且50%的子div都应用浮动左边。 '.row {width:100%} .display-inline-block {width:50%,float:left}'不要忘记flex是Nandu Kalidindi建议的更好的选择 – Muzammil