960 Grid System - 12 col - касание края контейнера

ProgramBox

960 Grid System — 12 col — касание края контейнера

Post author:admin
Запись опубликована:20 августа, 2022
Post category:Вопросы по программированию

#html #css #960.gs

#HTML #css #960.gs

Вопрос:

я использую сеточную систему 960, чтобы попытаться создать макет… У меня есть следующий код:

 <div class="container_12">
   <div class="grid_3 alpha"></div>
   <div class="grid_9 omega"></div>
</div>

Я использую alpha и omega для удаления левого и правого полей соответственно.. Это позволяет подразделениям касаться левого края контейнера..

Проблема, однако, заключается в том, что правая grid_9 omega не касается правой стороны. Я понимаю, почему это происходит, но я не знаю, как исправить это поведение с помощью методов 960..

Спасибо,

Ответ №1:

Это может помочь понять основы, лежащие в основе 960 grid framework. Эта структура основана на очень простом принципе, который сочетает фиксированную ширину и поля для создания макета, подобного сетке, для быстрой разработки веб-сайта. Используется вся структура float: left , которая позволяет отображать полосы рядом друг с другом, а также создавать буфер размером 20 пикселей между каждой сеткой. И поэтому я считаю, что вы неправильно понимаете использование "alpha" "omega" классов and . Эти классы предназначены для удаления полей в сетках, которые являются дочерними элементами других сеток, так что поле умножается.

Возьмем этот код для примера:

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>960 Grid System amp;mdash; Demo</title>
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/text.css" />
<link rel="stylesheet" href="css/960.css" />
</head>
<body>

<div class="container_12" style="background:blue;">
   <div class="grid_3 alpha" style="background:yellow;">Grid_3 Alpha</div>
   <div class="grid_9 omega" style="background:green;">Grid_9 Omega</div>
</div>

</body>
</html>

Это создает нечто похожее на:
Стандартная компоновка 960
вы заметите, что слева от Grid_3 нет поля, но между Grid_3 и Grid_9 есть поле в 20 пикселей. Это вызвано тем, что Grid_3 имеет a margin-right:10px , а Grid_9 имеет a margin-left:10px . Когда оба divs перемещаются влево, они создают этот интервал. Вы также заметите, что справа от Grid_9 есть еще одно поле размером 10 пикселей. Это связано с тем, что левое поле было удалено в Grid_3 и теперь весь макет смещен на 10 пикселей внутри container_12 div.

Для достижения макета, который вы описали. Что, насколько я понимаю, должно выглядеть так: макет 960 с плавающей точкой

Вам нужно будет либо создать новый класс, чтобы применить a float:right к Grid_9, либо увеличить ширину Grid_9.

Чтобы сделать это встроенным, это выглядело бы примерно так:

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>960 Grid System amp;mdash; Demo</title>
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/text.css" />
<link rel="stylesheet" href="css/960.css" />
</head>
<body>

<div class="container_12" style="background:blue;">
   <div class="grid_3 alpha" style="background:yellow;">Grid_3 Alpha</div>
   <div class="grid_9 omega" style="float:right; background:green;">Grid_9 Omega</div>
</div>

</body>
</html>

1. Спасибо, что нашли время написать подробное объяснение. Я надеялся, что это собственный класс в системе 960 grid, который будет делать то, что я требовал, не добавляя свой собственный CSS. Несмотря на то, что я не получил точного ответа, который искал, я узнал несколько вещей из вашего сообщения..

Ответ №2:

Вы не используете систему 960 в том виде, в каком она была разработана. Поля, которые удаляются с помощью классов alpha и omega, увеличат его до 960 пикселей.

Альфа и омега удаляют только поля слева и справа соответственно, они не меняют ширину. Если вы хотите, чтобы это работало, вам нужно будет добавить класс в grid_9 omega div, придав ему ширину, превышающую стандартную. может быть, 720 пикселей?

 <style>
.wide_9{width:720px;}
</style>

<div class="container_12">
   <div class="grid_3 alpha"></div>
   <div class="grid_9 wide_9 omega"></div>
</div>

1. Подождите, вы говорите: «Вы не используете систему 960 в том виде, в каком она была разработана», а затем используете хак, чтобы заставить вещи работать? Я не использую 960gs, но это кажется неправильным, плюс OP сказал, что хочет «исправить это поведение, используя методы 960». Значит, нет способа сделать это «изначально» с помощью grid framework?

2. Я бы не назвал определение класса и настройку его ширины взломом. Разумно предположить, что OP знает, что не нужно помещать теги стиля в тело. Если он хочет нестандартного поведения, ему нужно добавить свой собственный css. Я не видел никаких положений о том, что он хочет сделать в CSS сетки. Подобные фреймворки дают вам отличную основу, но если вы хотите сделать что-то особенное, вам нужно добавить свой собственный css. Это данность.

3. Да, «взломать» — слишком сильный термин, я просто удивлен, что для этого не было бы встроенного решения, особенно если alpha класс работает для первого div. 1 тогда, но, возможно, добавление класса в контейнер like full-width было бы хорошим решением.

Ответ №3:

Вам нужно использовать классы alpha и omega для дочерних элементов. Если ваш макет должен касаться полей (вы используете background), правильное использование классов alpha и omega будет выглядеть примерно так: прикрепление фона к grid_12 div.

 <div class="container_12">
  <div class="grid_12">
    <div class="grid_3 alpha"></div>
    <div class="grid_9 omega"></div>
  </div>
</div>

или, если вам не нужно выравнивание фона, вы можете просто опустить классы alpha и omega

 <div class="container_12">
  <div class="grid_3"></div>
  <div class="grid_9"></div>
</div>

Оба этих фрагмента должны выглядеть одинаково в браузере.

Метки: 960 Grid System — 12 col — касание края контейнера