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

У меня есть два divs на веб-странице, и я хотел бы, чтобы оба они имели фиксированную ширину и хотели бы, чтобы первый 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.
  • резервное копирование вашего ответа с документацией требуется.
9
css css-float

7 ответов

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

14
 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/

1

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

1

Float оба divs влево.

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

применить отрицательное левое поле ширины (div.слева) + ширина(разд.справа), в вашем случае, на 200px + на 200px = 400 пикселей.

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

второй элемент inline элемент.

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;
}

посмотреть пример

0

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

0

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

0