Работа с DIV и CSS

Question

Хорошо, если бы кто-нибудь мог мне помочь с этим, я был бы очень благодарен. Если вы скопируете и вставите следующее и откроете в IE или Firefox

<div style="border: solid 1px navy; float: left;">
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
    </ul>
</div>
<div style="background-color: blue;">
    <p>Some Text</p>
    <p>Another paragraph</p>
</div>

Почему второй элемент div с синим фоном расширяется за первый элемент div, содержащий список элементов? Как мне заставить его действительно плавать рядом с первым div?

Answer 1

Причина, по которой вы видите поведение, которое вы описываете, заключается в том, что именно эти инструкции вы даете DIV.

Давайте разберемся:

<div style="border: solid 1px navy; float: left;">

Это основано на поведении по умолчанию для всего, кроме границы, и, плавая его, вы говорите прямоугольнику прикрепить себя к левому полю (его родителя, который здесь считается телом) независимо от того, что еще принадлежит там. Ширина DIV по умолчанию составляет 100% от ширины родительского объекта (все еще тег body). Положение по умолчанию должно быть следующим элементом блока в потоке - поскольку других элементов блока нет, он выравнивается по вертикали с верхним полем.

Затем вы попросили другого DIV сделать это:

<div style="background-color: blue; float:left;">

Что по сути то же самое. Здесь вы не дали ни DIV новую ширину, ни какие-либо дополнительные инструкции о том, где в макете они должны теперь идти, поэтому он прикрепляется к левому полю, а его верхнее поле находит ближайший элемент блока, к которому можно прикрепить (все еще тело ).

Чтобы выстроить их в ряд, сделайте следующее:

  <style type="text/css">
    .leftBox, .rightBox
    {
       width: 48%; /*leave some room for varying browser definitions */
       border: 1px solid navy;
       float: left;
       display: inline; /* follow the semantic flow of the page and don't break the line */
       clear: left; /* don't allow any other elements between you and the left margin */
     }

    .rightBox
    {
       border: none;
       background-color: blue;
       clear: right;
    }
</style>
<div class="leftBox">
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
    </ul>
</div>
<div class="rightBox">
    <p>
        some other text</p>
</div>

Answer 2

Если вы хотите, чтобы синее поле находилось рядом со списком, вам также нужно его всплыть:

<div style="border: solid 1px navy; float: left;">
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
</ul>
</div>
<div style="background-color: blue; float:left;"><p>Some Text</p><p>Another paragraph</p></div>

Answer 3

Добавить overflow: auto; zoom: 1.0; ко 2-му div

Это отличается (и в некотором смысле ближе к тому, что было задано), чем помещать float: left; во 2-й делитель, потому что он сохраняет ширину 2-го деления, расширяясь насколько это возможно вправо без жестких значений ширины. zoom: 1.0; необходимо, чтобы задать расположение элементов в IE.

<div style="border: solid 1px navy; float: left;">
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
</ul>
</div>
<div style="background-color: blue; overflow: auto; zoom: 1.0;"><p>Some Text</p><p>Another paragraph</p></div>

Answer 4

Когда первый блок перемещается влево, второй блок позиционируется так, как будто его не существует (хотя любой текст внутри второго блока будет обтекать плавающий блок). См. спецификацию CSS2 для получения дополнительной информации о поведении плавающих элементов.

Чтобы второй div плавал рядом с первым div, вы можете добавить float: left ко второму div.

В качестве альтернативы, если ширина первого div известна, вы можете добавить левое поле ко второму div.

Answer 5

Вы хотите, чтобы второй div плавал рядом с первым? Затем вы добавляете float:left ко второму div.

Не создайте еще один div для очистки, это ужасно не семантически.

РЕДАКТИРОВАТЬ: overflow: auto не работает для IE, вам нужно дать div hasLayour в этом случае, который включает в себя взломать добавление zoom:1.0 или принудительно установить фиксированное измерение, которое вы не сможете сделать. Не взламывайте, когда существует правильное решение. Вы хотите, чтобы это плавало, используйте плавание.