将div容器放在右侧

Question

我想开发一些实用工具栏.我可以并排使用这个栏中的每个元素float:left;

但是我希望第二个元素位于栏的最右边.这对我来说很难,因为条的宽度不是静态的.

看看我的演示:http://jsfiddle.net/x5vyC/2/

它应该如下所示:

知道如何使用css实现这一目标吗？

Answer 1

这是你想要的吗？- 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>?

Answer 2

• 使用float: right到..浮动第二列到..权利.
• 使用overflow: hidden清除浮动,这样的背景颜色我只是把将是可见的.

现场演示

#wrapper{
    background:#000;
    overflow: hidden
}
#c1 {
   float:left;
   background:red;
}
#c2 {
    background:green;
    float: right
}

Answer 3

如果您不想使用浮点数

<div style="text-align:right; margin:0px auto 0px auto;">
<p> Hello </p>
</div>
  <div style="">
<p> Hello </p>
</div>

Answer 4

只是想为初学者更新此内容，现在您应该明确地使用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>?