为什么`float：left`不能使用固定宽度？ [英] Why `float:left` doesn't work with a fixed width?

问题描述

我在一个网页上有两个div，我想他们都有一个固定的宽度，并希望第一个div浮动在第二个div的左边。

I have two divs on a webpage and I would like both of them to have a fixed width and would like the first div to be floated to the left of the second div.

这听起来很简单，虽然下面的标记和CSS会给我想要的结果：

This sounds so simple that I though the following Markup and CSS would give me the desired result:

<div class="left">Content</div>
<div class="right">Content</div>

div.left {
    float: left;
    width: 200px;
}

div.right {
    width: 200px;

这不能像预期的那样工作，而是右边的div出现在下一行，浮动。在此示例网页中最好解释：

This doesn't work as expected, instead the right div appears on the next line as though it wasn't floated. This is best explained in this example webpage:

问题示例

Example of the Problem

我的问题是为什么这样无法正常工作？ / strong>不如何解决。

My question is WHY this doesn't work as expected? Not how to fix it.

注意：

• 请确保您查看并了解示例。
  
• 我了解所有修复程序/黑客，以使这项工作。


• 这似乎只能在Opera中正常工作。


• 需要用文档备份您的答案。

• Please make sure you fully understand how floats work before answering this question.
• Please make sure you view and understand the examples.
• Both elements must be block, not inline.
• I understand all fixes/hacks to make this work. I want to know why it doesn't work.
• This appears to only work correctly in Opera.
• Backing up your answer with documentation is required.

推荐答案

p>在我看来，这是一个简单的规则，块，除非浮动，总是开始一个新行。 w3.org/TR/CSS2/visuren.html#block-formatting 第9.4.1节 -

It seems to me that it is the simple rule that blocks, unless floated, always start a new line. w3.org/TR/CSS2/visuren.html#block-formatting section 9.4.1 –

这篇关于为什么`float：left`不能使用固定宽度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！