html - 如何使 2 个 div float ，左边的 div 具有固定的右边距？

Question

我实际上不知道如何命名我的问题。但我会解释我需要做什么。

HTML 就这么简单:

<div id="left_div"></div>
<div id="right_div"></div>

我需要 left_div 位于左侧，宽度为 100%，但右边距固定为 320px。 right_div 的宽度固定为 300px，并且必须与 left_div 并排。

我知道我可以很容易地做到这一点，当我这样做的时候:

<div id="right_div" style="float:right;width:300px"></div>
<div id="left_div" style="margin-right:320px;"></div>

但问题是我需要像我之前提到的那样使用 HTML。 DIV 的顺序很重要。如果有人想知道为什么，那是因为我在响应式网站上工作，在我需要的地方，当视口(viewport)太窄时，right_div 低于 left_div。我不能用我上面提出的简单解决方案来做到这一点。

我希望我的问题是有道理的，我感谢任何答案或有用的提示。

哦，我忘了说我需要它是纯 HTML+CSS，没有 JS。而且我不需要支持 IE7 及以下版本。

更新:left_div 必须是 width:auto 并且右边距必须固定(例如 300px)。

Answer 1

如果您希望您的布局具有响应性，您应该使用像 Columnal 这样的 CSS 框架。 , 1140 , 或更多 this list .

这些框架中的大多数都支持 grid system ，这是构建布局的最佳方式，您不必再担心 float 和像素了。