我想开发某种实用工具栏。我可以使用float:left;
但是我希望第二个元素位于栏的最右边。这对我来说很难,因为条的宽度不是静态的。
看一下我的演示:http://jsfiddle.net/x5vyC/2/
它应该是这样的:
知道如何使用css实现这一目标吗?
答案 0 :(得分:71)
这是你想要的吗? - http://jsfiddle.net/jomanlk/x5vyC/3/
现在双方都漂浮
#wrapper{
background:red;
overflow:auto;
}
#c1{
float:left;
background:blue;
}
#c2{
background:green;
float:right;
}
<div id="wrapper">
<div id="c1">con1</div>
<div id="c2">con2</div>
</div>
答案 1 :(得分:10)
float: right
将第二列浮动到..右边。overflow: hidden
清除浮动,以便我可以看到我刚放入的背景颜色。#wrapper{
background:#000;
overflow: hidden
}
#c1 {
float:left;
background:red;
}
#c2 {
background:green;
float: right
}
答案 2 :(得分:4)
如果你不想使用float
<div style="text-align:right; margin:0px auto 0px auto;">
<p> Hello </p>
</div>
<div style="">
<p> Hello </p>
</div>
答案 3 :(得分:3)
现在只想为初学者更新此内容,您应该明确地使用flexbox来做到这一点,它更合适并适合于响应式尝试:http://jsfiddle.net/x5vyC/3957/
#wrapper{
display:flex;
justify-content:space-between;
background:red;
}
#c1{
background:blue;
}
#c2{
background:green;
}
<div id="wrapper">
<div id="c1">con1</div>
<div id="c2">con2</div>
</div>
答案 4 :(得分:-2)
这对我有用。
<div style="position: relative;width:100%;">
<div style="position:absolute;left:0px;background-color:red;width:25%;height:100px;">
This will be on the left
</div>
<div style="position:absolute;right:0px;background-color:blue;width:25%;height:100px;">
This will be on the right
</div>
</div>