Перекрытие CSS div

Question

Я пытаюсь создать раздел комментариев для моего сайта. В разделе комментариев я хочу, чтобы он был выложен в стиле WordPress, с аватаром слева. Это работает, но происходит то, что текст комментария оборачивается вокруг аватара внизу. Например, здесь . Это, вероятно, имеет простое решение, но я любитель CSS. Это соответствующие XHTML и CSS:

<div class="comment">
 <div class="left">
  <img src="images/noavatar.png" alt="No Avatar" />
 </div>

 <div class="right">
  <h3>Laura Brauman</h3>
  <span>12 March 09</span>
  <p>Nunc ultrices nisi ut tellus. In placerat tempus quam. Nulla dolor nulla,dictum eget, auctor a, rutrum sit amet, ante. Sed scelerisque est.            Vestibulum arcu purus, dignissim nec, rhoncus id, sodales eu, quam. Nullam congue hendrerit enim. Phasellus risus. Pellentesque lacus sem, luctus tempus.</p>
 </div>
</div>

/*------- COMMENTS -------*/
#comments
{
    width: 91px;
    height: 18px;
    background: url(images/comments.png) no-repeat;
    text-indent: -9000px;
    margin-bottom: 10px;
}

div.comment
{
    padding: 5px 5px 30px 5px;
    background: url(images/commentbar.png) bottom center no-repeat;
    margin-bottom: 10px;
}

div.comment div.left { margin-left: 10px; float: left; width: 51px; }
div.comment div.right { width: 482px; }
div.comment div.right h3 { color: #e6267c; font-size: 18px; display: inline; text-transform: uppercase; }

Answer 1

Из спецификации :

Поскольку поплавка нет в потоке, непозиционированные блоки блоков, созданные до и после блока поплавка, текут вертикально, как если бы поплавок не существовал.

Это означает, что элементы с display: block, которые не расположены, игнорируют число с плавающей запятой.

Однако линейные блоки, созданные рядом с поплавком, укорачиваются, чтобы освободить место для поля полей поплавка.

Это означает, что встроенные элементы обтекают поплавки. Вот почему ваш <span> и текст внутри <p> обтекают div.left, хотя <p> и div.right этого не делают.

Граничный блок таблицы, замененный элемент уровня блока или элемент в нормальном потоке, который устанавливает новый контекст форматирования блока (например, элемент с «переполнением», отличным от «видимого»), не должен перекрывать какие-либо плавает в том же контексте форматирования блока, что и сам элемент. Если необходимо, реализации должны очистить указанный элемент, поместив его ниже любых предыдущих поплавков, но могут разместить его рядом с такими поплавками, если есть достаточно места.

И это - как бы глупо это ни было - является ответом на вашу проблему. Вы должны вставить «новый контекст форматирования блока ».

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

Самый простой из них для вас: 1 :

div.right { overflow: auto; }

Обратите внимание, что вы, вероятно, также хотите 1 :

div.comment { overflow: auto; }

Исправить связанную, но другую проблему. Если ваш контент <p> короче вашего изображения, то всплывающее div.left не увеличит высоту div.comment. Добавление overflow: auto; перенесет вас в точно названную Сложную ситуацию часть спецификации:

Если элемент [Уровень блока, незаменяемые элементы в обычном потоке, когда «переполнение» не вычисляется для «видимого»] элемента, имеет плавающих потомков, нижний край поля которых находится ниже нижнего, то высота увеличивается, чтобы включить эти края

Что в основном говорит, что числа с плавающей точкой расширяют overflow <> visible содержащие элементы.

1 overflow: hidden; также будет работать, но будет обрезать содержимое вместо броска полос прокрутки, если это необходимо.

Answer 2

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

Либо тот, либо плавающий другой элемент уровня блока.

Answer 3

div.right { float: left; width: 482px; }

Answer 4

Добавьте это к div.right

margin-left: 51px;