Почему `float: left` не работает с фиксированной шириной?

Question

У меня есть два div на веб-странице, и я хотел бы, чтобы они оба имели фиксированную ширину, и хотел бы, чтобы первый div был перемещен слева от второго div.

Это звучит так просто, что я думаю, что следующая разметка и CSS дадут мне желаемый результат:

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

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

div.right {
    width: 200px;

Это не работает так, как ожидалось, вместо этого в следующей строке отображается правый элемент div, как будто он не был перемещен. Это лучше всего объяснить в этом примере веб-страницы:

Пример задачи

Мой вопрос: ПОЧЕМУ это работает не так, как ожидалось? Не как это исправить.

Примечания:

• Прежде чем ответить на этот вопрос, убедитесь, что вы полностью понимаете, как работают поплавки.
• Пожалуйста, убедитесь, что вы просматриваете и понимаете примеры.
• Оба элемента должны быть блочными, а не встроенными.
• Я понимаю все исправления / взломы, чтобы сделать эту работу. Я хочу знать, почему это не работает.
• Это, кажется, работает правильно только в Opera.
• Требуется подкрепление вашего ответа документацией.

Answer 1

Мне кажется, что это простое правило, что блоки, если они не всплывают, всегда начинают новую строку. w3.org / TR / CSS2 / visuren.html # block-formatting раздел 9.4.1 -

Answer 2

Плавающие элементы могут перетекать «в» блочные элементы, занимая одну и ту же строку, но толкая содержимое (не сам элемент). В этом случае left находится "inside" right, но для текста справа не осталось места, поэтому он идет снизу. Чтобы понять, что я имею в виду, попробуйте установить ширину справа 300 пикселей вместо 200 пикселей - вы должны увидеть синюю рамку «вокруг» слева с текстом, обтекающим ее. Чтобы «исправить» это, я бы посоветовал указывать справа плавающий элемент влево или отображать строковый блок.

Answer 3

 div.left {
     float: left;
     width: 200px;
    height:200px;
    background:red;
 }

 div.right {
    float:right;
     width: 200px;
     height:200px;
    background:blue;
}

см. http://jsfiddle.net/3kUpF/

В качестве альтернативы, если вы хотите, чтобы они располагались рядом, вы можете плавать: слева на обоих см. http://jsfiddle.net/3kUpF/1/

Answer 4

В случае, если вы хотите, чтобы оба контейнера плавали вместе друг с другом, вы можете использовать span вместо div.Это может положить конец этой проблеме.

Answer 5

Вы можете добавить clear:both; ваши <p> теги.Это решило бы проблему.Не нарушая остальную часть (пример) страницы.

Answer 6

Перемещение обоих делителей влево.

Применение положительного левого поля ширины (div.right), в вашем случае 200px.

Применение отрицательного левого поля ширины (div.left)+ ширина (div.right), в вашем случае, 200px + 200px = 400px.

div.left { float: left; width: 200px; margin-left: 200px; }
div.right { float: left; width: 200px; margin-left: -400px; }

Answer 7

Второй элемент должен быть inline element.

div.right {
    width: 200px;
    display: inline;
}

Если вы не хотите, чтобы второй элемент был встроенным, просто добавьте его влево.Но ваш контейнер рухнет.Вы можете исправить это, используя clear:

<div id="container">
    <div class="left">Content</div>
    <div class="right">Content</div>
    <br style="clear:both"/>
</div>

div.left {
    float: left;
    width: 200px;
    border: 1px solid red;
}

div.right {
    width: 200px;
    border: 1px solid green;
    float:left;
}

#container{
    border: 1px solid black;
}

См. пример