CSS работает в jsFiddle, но только частично работает вне вопроса jsFiddle + DIV - PullRequest
Новая
       24

CSS работает в jsFiddle, но только частично работает вне вопроса jsFiddle + DIV

2 голосов
/ 28 июля 2011

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

Я видел другие подобные вопросы, но они касаются jQuery (которым я пока не пользуюсь).

ссылка: http://jsfiddle.net/3BpRr/

Edit:

Jsfiddle почему-то дважды имеет <style type="text/css">. Я сделал это, и это работает.

Второй вопрос: 

<div class="chatLine">
    <div class="chatName">John&nbsp;&nbsp;</div>
    <div class="chatMsg">I am very hungry.</div>
</div>
  <br />
<div class="chatLine">

Есть ли способ поместить <br /> в div chatLine? Я собираюсь использовать javascript для создания / уничтожения chatLines.

Заранее спасибо!

Ответы [ 2 ]

3 голосов
/ 28 июля 2011

  1. Проблема с overflow:hidden; свойством. Удалите его или сделайте селектор для него более точным, так как он в настоящее время выбирает все элементы.

  2. РЕДАКТИРОВАТЬ: причина, по которой <br /> в конце chatLine <div> приводит к взрыву, состоит в том, что вы используете абсолютное позиционирование. Старайтесь не использовать абсолютное позиционирование, за исключением вещей, которые на самом деле являются абсолютными.

1 голос
/ 28 июля 2011

Я изменил ваш последний jsfiddle: http://jsfiddle.net/qktrv/1/

Надеюсь, это то, чего вы хотите достичь.

Изменения:

jsFiddle не требует тега стиля в поле CSS, поэтому я вынул его. Кроме того, я изменил правило, устанавливающее абсолютное позиционирование для всех элементов div, и просто поместил его в каждый элемент div, в котором он был необходим. Несмотря на то, что он установлен абсолютным для почти всего, это может предотвратить другие проблемы в будущем. Если вы захотите изменить его позже, чтобы сделать укороченный файл CSS, я не вижу в этом никакого вреда, если вы установите правильное позиционирование на элементах div, которые не являются абсолютно позиционированными.

Обзор:

Ваши чаты div, chatName и chatMsg были позиционированы как абсолютные из-за этого правила, которое выводит их из нормального потока документа. Другими словами, они не будут расширять родительский div.

...