Почему этот div не плавает?

У меня есть два списка и две кнопки. Каждый список находится в своем собственном div, и две кнопки находятся в их собственном div. Один список должен быть слева, а две кнопки должны быть справа от него с другим списком справа от кнопок. Это разметка, которую я использую, но она помещает второй список ниже кнопки «Удалить».Почему этот div не плавает?

<p>Available Colors</p> 
    <div style="float:left; margin:5px;"> 
     <asp:ListBox ID="lstAvailableColors" runat="server"></asp:ListBox> 
    </div> 
    <div> 
     <asp:Button ID="btnAdd" runat="server" Text="Add" /><br /> 
     <asp:Button ID="btnRemove" runat="server" Text="Remove" /> 
    </div> 
    <div style="margin:5px;"> 
     <asp:ListBox ID="lstSelectedColors" runat="server"></asp:ListBox> 
    </div>

источник

2009-04-29 Xaisoft

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

Вы должны, вероятно, поплавать им влево, чтобы получить макет, который вы описали. div s по умолчанию отображаются с помощью блока-дисплея, который будет помещать разрывы строк между # 2 и # 3, если вы их не плаваете.

источник

2009-04-29 21:02:22

Я подумал, что когда вы делаете float на элементе уровня блока, другие элементы автоматически плавают рядом с ним, если вы не сделаете ясность. Это правильно или я что-то не понимаю? – Xaisoft

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

@Xaisoft: незапланированные элементы выложены как обычно, но они «обертываются» вокруг плавающего элемента. –

Поплавок всех трех разделов слева.

Кроме того, вы должны установить явную ширину для плавающих элементов.

источник

2009-04-29 21:04:12

Требование ширины было ослаблено в CSS 2.1. – Anonymous

@ Анонимно: Я этого не знал. Благодарю. –

Fisrt div со списком будет плавать влево, а остальные div будут занимать оставшееся место на странице, которое будет находиться справа от div, который поплыл слева.

Это 3 колонки, которые вам нужны? Если так что вам нужно что-то вроде этого

<div style="float:left; width:66%"> 
    <div style="float:left; width:50%"></div> 
    <div style="float:right; width:50%"></div> 
</div> 
<div style="float:right; width:33%"></div>

источник

2009-04-29 21:06:45

Почему этот div не плавает?

ответ

Смежные вопросы