只要使用z指数，一切都会很好。确保将位置标记为固定或绝对。然后没有东西会像浮动标签一样移动。

@roe和@MohitNanda所建议的方法是有效的，但是如果正确的div被设置为float:right;，那么它必须在HTML源代码中首先出现。这打破了从左到右的读取顺序，如果页面显示时关闭了样式，可能会导致混乱。如果是这样的话，使用包装器div和绝对定位可能会更好:

<div id="wrap" style="position:relative;">
    <div id="left" style="margin-right:201px;border:1px solid red;">left</div>
    <div id="right" style="position:absolute;width:200px;right:0;top:0;border:1px solid blue;">right</div>
</div>

证明:

编辑:嗯，有意思。预览窗口显示了正确格式化的div，但呈现的post项没有。对不起，那你自己试试吧。

我今天遇到了这个问题。基于以上的解决方案，这对我来说是有效的:

<div style="width:100%;"> 
    <div style="float:left;">Content left div</div> 
    <div style="float:right;">Content right div</div> 
</div> 

简单地让父div跨越全宽度和浮动div包含在其中。

更新

如果需要在一行中放置元素，可以使用Flex Layout。这里有另一个Flex教程。它是一个很棒的CSS工具，尽管它不是100%兼容，但它的支持每天都在变得更好。这很简单:

HTML

<div class="container">
    <div class="contentA"></div>
    <div class="contentB"></div>
</div>

CSS

.container {
    display: flex;
    width: 100%;
    height: 200px;
}

.contentA {
    flex: 1;
}

.contentB {
    flex: 3;
}

你得到的是一个总大小为4个单元的容器，它与其子单元以1/4和3/4的关系共享空间。

我已经在CodePen中做了一个例子来解决你的问题。我希望这能有所帮助。

http://codepen.io/timbergus/pen/aOoQLR?editors=110

非常古老的

也许这只是无稽之谈，但你试过用桌子吗?它不直接使用CSS来定位div，但它工作得很好。

你可以创建一个1x2的表格，把你的div放在里面，然后用CSS格式化表格，把它们放在你想要的地方:

<table>
  <tr>
    <td>
      <div></div>
    </td>
    <td>
      <div></div>
    </td>
  </tr>
</table>

Note

如果你想避免使用表，如前所述，你可以使用float: left;和float: right;在下面的元素中，不要忘记添加一个clear: left;， clear: right;或明确:两者;为了清洁这个位置。

我混合使用float和overflow-x:hidden。最少的代码，总是有效的。

https://jsfiddle.net/9934sc4d/4/ -加上你不需要清除你的浮动!

.left-half{
    width:200px;
    float:left;
}
.right-half{
    overflow-x:hidden;
}

正如大家所指出的，你可以通过设置float:right;RHS含量为负，LHS为负。

然而. .如果你不使用浮点数:left;在LHS上(如Mohit所做的那样)，那么你会得到一个步进效果，因为LHS div仍然会在布局中消耗边缘空间。

然而. .LHS浮动将收缩内容，所以如果这是不可接受的，你将需要插入一个定义宽度的子节点，在这一点上，你也可以在父节点上定义宽度。

然而. .正如David指出的那样，你可以改变标记的读取顺序来避免LHS浮点要求，但这有可读性和可能的可访问性问题。

然而. .这个问题可以用浮动来解决，并提供一些额外的标记

(警告:我不赞成在那个例子中使用.clearing div，详情请看这里)

综合考虑，我想我们大多数人都希望有一个非贪婪宽度:留在CSS3中……