Создание плавной сетки - кажется, что проценты путаются

Я смотрел на фреймворк Skeleton (getskeleton.com), но мне нужна была плавная система сетки. Меня также интересует внутренняя работа этих сеток, поэтому я решил создать свою собственную.

Однако у меня проблемы с процентами two.columns. Все другие ширины столбцов работают нормально. Во-первых, вот что происходит:

введите здесь описание изображения

Со вторым рядом явно что-то не так, и я действительно не могу понять, что это такое.

Мой код для этого макета выглядит следующим образом:

   $max-width: 600px;

   .container {
     @include container($max-width);

     .column, .columns {
       @include columns($max-width);
     }

     .one.column, .one.columns  { width: perc(30px, $max-width); }
     .two.columns               { width: perc(80px, $max-width); }
     .three.columns             { width: perc(130px, $max-width); }
     .four.columns              { width: perc(180px, $max-width); }
     .five.columns              { width: perc(230px, $max-width); }
     .six.columns               { width: perc(280px, $max-width); }
     .seven.columns             { width: perc(330px, $max-width); }
     .eight.columns             { width: perc(380px, $max-width); }
     .nine.columns              { width: perc(430px, $max-width); }
     .ten.columns               { width: perc(480px, $max-width); }
     .eleven.columns            { width: perc(530px, $max-width); }
     .twelve.columns            { width: perc(580px, $max-width); }

Вот миксины/функции, которые я использовал, не уверен, что это важно:

@function perc($width, $container-width) {
  @return percentage($width / $container-width);
}

@mixin container($width)  {
  position: relative; 
  width: $width; 
  margin: 0 auto; 
  padding: 0;
}

@mixin columns($max-width)  {
  float: left;
  display: inline;
  margin: 0 10px;
}

Код в файле HTML просто:

<% 6.times do %>
  <div class="two columns box"></div>
<% end %>

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

Я помещаю обработанный CSS в pastebin: http://pastebin.com/bxq1a5Ge

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


css sass fluid grid
person Joris Ooms    schedule 04.03.2012    source источник

Ответы (2)


arrow_upward
2
arrow_downward

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

Другой вариант заключается в том, что это проблема округления, поскольку браузер не может аккуратно преобразовать процентные значения в значения пикселей.

Я настроил базовый jsfiddle проблемы, так как jsfiddle поддерживает SCSS. В примере показан вариант 2 как хороший кандидат, но я бы посоветовал изменить все значения ширины на проценты.

person Stuart Burrows    schedule 04.03.2012
comment
Я только что проверил это в Firefox, и там все выглядит нормально. В Хроме этого нет. Настроенный вами JSFiddle также выглядит плохо в Chrome, как на моем снимке экрана. Означает ли это, что я должен отказаться от текучести? Немного запутался теперь :( - person Joris Ooms; 05.03.2012

arrow_upward
0
arrow_downward

По всей видимости

perc(80px, 600px) дает 13.333%.

Проблема была исправлена, когда я использовал width: 13.3333333%.

person Joris Ooms    schedule 05.03.2012
comment
Sass по умолчанию использует 3 десятичных знака. Инструкции о том, как переопределить этот параметр. - person steveax; 05.03.2012