CSS: плавающее DIV влияет на содержание не плавающим ДИВ

Я только finsished в Google CSS прохождение игры: http://code.google.com/intl/de-DE/edu/submissions/html-css-javascript/CSS: плавающее DIV влияет на содержание не плавающим ДИВ

После экспериментов с файлами примеров (файл: CSS-walkthrough.html), я нашел какое-то странное поведение , Я не мог объяснить.

У меня есть три дивы в контейнере DIV:

<div id="wd-c"> 

    <div id="wd-1"><span>1</span></div> 

    <div id="wd-2"><span>2</span></div> 

    <div id="wd-3"><span>3</span></div> 

</div>

У нас есть follwing CSS, что делает, как и ожидалось: все 3 дивы взяты «из потока», и отображаются в одной строке. Пролисты содержимого находятся внутри div.

#wd-c div { 
    height: 150px; 
    border: 1px solid #222; 
    font-size: 150%; 
    font-weight: bold; 
    opacity: .7; 
} 

#wd-c div { width: 150px; } 
#wd-C#wd-1 { width: 50px; } /*for clarity*/  

#wd-1 { float: left } 
#wd-2 { float: left } 
#wd-3 { float: left }

Однако, когда я раскомментировать:

/*#wd-3 { float: left }*/

DIV # WD-1 и # WD-2 по-прежнему оказывается 'из потока', # WD-3 отображается как блочный элемент, перекрытие другого 2.

Странно, что диапазон содержимого с символом 3 появляется под всеми div и больше не находится в # wd-3.

Похоже, что содержимое # wd-3 зависит от плавающих divs, что, очевидно, неверно. Например, при изменении ширины # Wd-3 в

#wd-C#wd-3 { width: 220px; }

персонаж делает внутри DIV, только рядом с перекрытием плавающей DIV # WD-2 .. у вас есть какие-либо объяснения?

источник

2012-03-20 Fabian

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

Это вполне логично. float не принимает соответствующий элемент из потока документов, как position:absolute.

Обычно элемент «уважает» близлежащие плавающие элементы и пытается соответствующим образом отображать его содержимое. Теперь, удалив float на ваш третий div, он получает рисунок ниже плавающих div. Тем не менее, он пытается сделать его содержимое в следующем месте возможным, не мешая плавающему содержимому divs.

Поскольку вы указали фиксированную ширину и высоту, третьему элементу нет места для отображения его содержимого без «столкновения» с плавающими div. Вот почему внутренний span -Element проталкивается ниже плавающих divs, где будет следующее свободное пространство для этого элемента.

Надеюсь, это объясняет механику. Попытайтесь поэкспериментировать с высотой и шириной. (Комментируя их), чтобы увидеть различия.

источник

2012-03-20 14:54:09 Christoph

У Кристофа все в порядке. Вот пример оригинальной разметки и стилей для экспериментов: http://jsfiddle.net/qeYPj/. Обратите внимание, что если вы прокомментируете третий, вы увидите проблемы, о которых упомянул OP. Это в значительной степени зависит от наличия * высоты *, установленной на div.Удалите строку высот в CSS и вы получите контейнеры, не перекрывающиеся; тем не менее, диапазон по-прежнему сбрасывается вниз под самый правый плавающий div. Добавьте высоту назад, но также добавьте «overflow: hidden», чтобы увидеть, как это * контент * влияет на воспринимаемое поведение float. ;-) –

Я не понимаю. Существует достаточно места для размещения содержимого третьего пролета справа от плавающих элементов; почему он все равно будет отодвинут? Я имею в виду, что «ясности» нет. И это не похоже на то, что третий ди-джек сбился. –

@MrLister, возможно, эта скрипка облегчает вам: http://jsfiddle.net/poikl/Y4tTQ/1/ Плавание - сложная вещь css, требуется некоторое время, чтобы пройти через нее, просто поиграйте со скрипкой и спросите если у вас возникнут дополнительные вопросы. – Christoph

Попробуйте загрузить пример снова, на моем компьютере 3 остается в пределах #wd-3 div, когда я плаваю.

Или, если вы хотите, чтобы div оставался constrainer для элемента родительского блока, используйте overflow:hidden на div #wd-c.

источник

2012-03-20 14:42:06

CSS: плавающее DIV влияет на содержание не плавающим ДИВ

ответ

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