Создание жидкой сетки - проценты, кажется, портят - PullRequest
Новая
       11

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

1 голос
/ 05 марта 2012

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

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

enter image description here

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

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

   $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

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

Ответы [ 2 ]

2 голосов
/ 05 марта 2012

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

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

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

0 голосов
/ 05 марта 2012

Видимо

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

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

...