HTML Divs непоследовательно используют файл CSS

Я использую фреймворк под названием 960.gs (это здорово!)

Я создаю класс div 12 (который расширяется на всю веб-страницу). Затем я решаю создать три div в классе 12, каждый div имеет класс 4 (4 + 4 + 4 = 12).

У меня есть 2 файла CSS, один текст с настройками по умолчанию для тела, общие шрифты и т. д. (общие настройки). И другой файл CSS — таблица стилей, в которой я редактирую каждый div и применяю стили и т. д.

Почему-то 3 дива (внутри основного класса 12 див). Первый и второй div используют лист text.css, а третий div использует stylesheet.css.

Я проверил орфографию и все такое, но я не знаю, почему это так. Совет будет полезен!

У меня есть 5 скриншотов кода, буду признателен за советы https://db.tt/vyv5ihq4


html css 960.gs
person ben_dchost    schedule 07.02.2014    source источник
comment
#siteonlineleft, #siteonlinemiddle, #siteonlineright p ← Видите здесь что-то не так?   -  person kei    schedule 07.02.2014
comment
@kei Я не знал, что мне нужно было ставить p после каждой отдельной сетки ... возможно, ты что-то понял!   -  person ben_dchost    schedule 07.02.2014

Ответы (1)


arrow_upward
0
arrow_downward

Вместо вложения трех столбцов в контейнер .grid_12 просто используйте .grid_4 для каждого из этих столбцов. После последнего .grid_4 используйте div.clear, чтобы настроить новую строку для дополнительного контента (div.clear следует использовать после каждой строки, чтобы значения с плавающей запятой сбрасывались и/или не перекрывали друг друга).

<div class="grid_4">
  Grid one
</div>
<div class="grid_4">
  Grid two
</div>
<div class="grid_4">
  Grid three
</div>
<div class="clear"></div>
<!-- new columns and content go here after the clearfix above -->

демонстрация 960.gs

person dlane    schedule 07.02.2014
comment
Я попробую это сейчас, и я сообщу вам о своих результатах! - person ben_dchost; 07.02.2014
comment
вместе вы, похоже, решили проблему. Итак, вы всегда должны использовать div.clear поверх вложенных сеток друг в друга (альфа/омега)? - person ben_dchost; 07.02.2014
comment
Приведенный выше пример не является решением «всегда или никогда». Например, у вас есть основной контейнер .grid_8 и боковая панель .grid_4. Если вы хотите добавить дополнительные столбцы внутри .grid_8, вам нужно будет использовать .alpha в крайнем левом столбце и .omega в последнем столбце в этой строке. Как только вы нажмете последний столбец в строке, вам нужно .clear этих плавающих элементов. Короче говоря, каждый раз, когда вы закончите с рядом столбцов, вы должны очистить их с помощью div.clear. - person dlane; 07.02.2014
comment
Спасибо за ваш ответ. Теперь это имеет гораздо больше смысла! С этого момента я обязательно включу div.clear! - person ben_dchost; 10.02.2014