Работа с DIV и CSS

Хорошо, если бы кто-нибудь мог помочь мне с этим, я был бы очень благодарен. Если вы скопируете и вставите следующее и откроете в 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?

10.12.2008 17:17:59
5 ОТВЕТОВ
РЕШЕНИЕ

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

<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>
3
10.12.2008 17:25:39
Это меняет ширину 2-го деления. Смотрите другой ответ для альтернативного решения: stackoverflow.com/questions/356835/working-with-divs-css#356877
Jonathan Tran 10.12.2008 18:14:30

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

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

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

1
10.12.2008 17:57:16

Добавить overflow: auto; zoom: 1.0;во 2-й див

Это отличается (и в некотором смысле ближе к тому, что было задано), чем установка 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>
1
10.12.2008 18:39:06
Интересно, я никогда не видел такого использования для переполнения: авто. Спасибо!
iano 10.12.2008 17:30:05

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

Не создавайте другой div исключительно для очистки, это ужасно бессмысленно.

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

0
10.12.2008 17:27:17

Причина, по которой вы видите описанное вами поведение, заключается в том, что именно эти инструкции вы даете 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>
7
10.12.2008 17:44:44