При использовании 960 Grid System, как получить столбец размером 181px?

Question

Я хочу использовать 960 Grid System и создать сетку размером 981px, используя:

http://www.gridsystemgenerator.com/gs01.php?GridWidth=981&GridColumns=3&GridMarginLeft=20&GridMarginRight=20

Проблема в том, что я не вижу, как я могу создать левый столбец с шириной 181. Кажется, что с сеткой я застрял с 287. Это правда? МЫСЛИ?

Answer 1

Вы всегда можете «вырваться» из 960gs и создать div внутри столбца (тогда этот div будет установленной шириной). Не забудьте учесть этот div, очистите его правильно, и вы получите желаемую ширину. Но на самом деле вы должны использовать сеточную систему или вообще не использовать ее, если вам нужно взломать всю страницу.

например:

<div class="prefix_1 grid_3">
 <div style="width: 181px; float: left;">
  example
 </div>
</div>

или position: relative; и т. Д .; однако вы хотите выйти за рамки (я имею в виду то, что соответствует вашим настройкам).

Answer 2

Вот система координат со столбцами шириной 181px, которая имеет полную ширину 981px.Причина, по которой он соответствует вашим требованиям к ширине, заключается в том, что один внешний край на 1px шире, чем другой.Сбейте это значение 1px, и вы получите красиво округленную полную ширину 980px;

Answer 3

На самом деле у вас не должно быть сетки только из 3 столбцов. Не думайте об одном столбце как о столбце в вашем макете (то есть основной, правый, левый). Вместо этого это наименьшая возможная единица измерения по горизонтали. так что у вас может быть левая боковая панель из 4 столбцов, левая боковая панель из 3 столбцов и основная область из 5 столбцов.

Тем не менее, если вам нужно, чтобы в дизайн, который вам передали, уже были встроены определенные ширины, то использование структуры сетки, вероятно, не является хорошей идеей. Обычно у вас будет дизайн конструктора для сетки, которую вы планируете использовать, или доработка дизайна для привязки к сетке. Независимо от того, что вы делаете, вы не сможете получить сетку с измерением «n columns = 181px».