如何将 2 个独立的浮子放在一起？

Question

我有 2 个花车，一个在屏幕左侧，一个在屏幕右侧。我的目标是将左侧浮动移动到屏幕的右侧，但不将其移动到另一个浮动的右侧。我无法更改它们在 HTML 中的顺序，因此目前第一个浮点数优先。我忽略了什么吗？如果没有，我有什么选择？

jsFiddle: http://jsfiddle.net/h7y9bwre/

HTML:

<!-- Section 1 -->
<div class="left">
    <p>Some Text</p>
    <p>Other Stuff</p>
</div>

<!-- Section 2 -->
<div class="right">
    <img src="http://placehold.it/30x30" />
    <img src="http://placehold.it/30x30" />
</div>

"Section 1" 必须在 HTML.

中保持在 "Section 2" 以上

目前：

目标：

Answer 1

根据你的图片，你可以这样做：

#bar-container{
    float: right;
    width: 300px;
}

demo

Answer 2

只需更改 css 中的浮点数即可。

而不是：

.left {float: left;}
.right {float: right; }

反转它：

.left {float: right;}
.right {float: left; }

Fiddle: http://jsfiddle.net/abhitalks/h7y9bwre/1/

编辑（基于 Op 对问题的编辑）：

更改 div 的百分比宽度和边距。目前，它们是整个宽度的 50%。更改为：

.left, .right {width: 25%;}
.left {float: left; margin-left: 50%;}
.right {float: right; }

Fiddle 2: http://jsfiddle.net/abhitalks/h7y9bwre/5/

Answer 3

你好现在定义你的class.leftfloat: right; margin-left:50%;

像这样

#bar-container .left{
    float: left;
    width:25%;
    margin-left:50%; 
}
#bar-container .right{

    width:25%; 
}

Answer 4

我只是将 .right css 更改为

position:relative;
top:100px;
left:300px;

我有更新 jsFiddle: http://jsfiddle.net/h7y9bwre/4/ 不知道那是不是你想要的。希望对你有帮助。

Answer 5

您可以覆盖当前的 CSS，让 <div> 右对齐，方法是使它们 inline-block。

#bar-container {width: 100%;}
.left, .right {width: 50%;}
.left {float: left;}
.right {float: right; }

p {display: inline-block; padding: 0 1%}

.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */


/**
 * YOUR STYLES
 */



#bar-container {
  text-align: right;
}

.left, .right {
  display: inline-block;
  float: none;
  vertical-align: middle;
  width: auto;
}

.left {
  min-width: 200px;
}

<div id="bar-container" class="clearfix">
    <div class="left">
        <p>Some Text</p>
        <p>Other Stuff</p>
    </div>
    
    <div class="right">
        <img src="http://placehold.it/30x30" />
        <img src="http://placehold.it/30x30" />
    </div>
</div>

Answer 6

flexbox可以做到

#bar-container {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}
#bar-container div {
    border:1px solid red;
}
p {
    display: inline-block;
    padding: 0 1%;
    margin: 0;
}

<div id="bar-container" class="clearfix">
    <div class="left">
        <p>Some Text</p>
        <p>Other Stuff</p>
    </div>
    <div class="right">
        <img src="http://placehold.it/30x30" />
        <img src="http://placehold.it/30x30" />
    </div>
</div>

Answer 7

您不需要为此使用浮点数。只需将包装器设置为内联块并将它们对齐到右边。

.right,
.left {
  display: inline-block;
}
#bar-container {
  text-align: right;
}

如何将 2 个独立的浮子放在一起？

How Can I Bring 2 Separate Float's Together?

html

css

css-float