Плавающие элементы в Susy с одинаковой шириной, отступами и границами

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

Суть о Sassmeister

HTML:

<ul>
  <li>
    <img src="http://placehold.it/304x120">
    <p>Lorem ipsum dolor sit amet cons ectator adipscing elit commer maladonit. Lorem ipsum dolor sit amet cons ectator adipscing elit commer maladonit. Lorem ipsum dolor sit amet cons ectator adipscing elit commer maladonit.</p>
  </li>
  <li>
    <img src="http://placehold.it/304x120">
    <p>Lorem ipsum dolor sit amet cons ectator adipscing elit commer maladonit. Lorem ipsum dolor sit amet cons ectator adipscing elit commer maladonit. Lorem ipsum dolor sit amet cons ectator adipscing elit commer maladonit.</p>
  </li>
  <li>
    <img src="http://placehold.it/304x120">
    <p>Lorem ipsum dolor sit amet cons ectator adipscing elit commer maladonit. Lorem ipsum dolor sit amet cons ectator adipscing elit commer maladonit. Lorem ipsum dolor sit amet cons ectator adipscing elit commer maladonit.</p>
  </li>
</ul>

СКСС:

// ----
// Sass (v3.3.3)
// Compass (v1.0.0.alpha.18)
// Breakpoint (v2.4.2)
// Susy (v2.1.1)
// ----

@import "breakpoint";
@import "compass";
@import "compass/reset";
@import "susy";

// Settings

$total-columns  : 12;
$c-width        : 64px;
$gutter-width   : 16px;
$grid-padding   : 8px;

$susy: (
  column-width: $c-width,
  columns: $total-columns,
  global-box-sizing: border-box,
  gutter-position: inside,
  gutters: $gutter-width / $c-width,
  debug: (
    image: show,
    output: overlay,
    toggle: top right,
  )
);

$tablet-width: 620px;
$tablet-columns: 8;

$desktop-width: 960px;
$desktop-columns: 12;

body { @include container; }

img {
  height: auto;
  max-width: 100%;
}

@include susy-breakpoint($tablet-width, $tablet-columns) {
  ul { @include clearfix; }

  li {
    @include span(3 of 6);
    border-right: 1px solid black;

    &:first-child { padding-left: 0; }

    &:last-child {
      border: 0;
      padding-right: 0;
    }
  }
}

@include susy-breakpoint($desktop-width, $desktop-columns) {
  li { @include span(4 of 12); }
}

Что я делаю неправильно? Любая помощь будет принята с благодарностью!


css sass compass-sass susy-compass
person Cofey    schedule 19.03.2014    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Чтобы уточнить: вам не нужна одинаковая внешняя ширина, вам нужна одинаковая ширина content (после удаления левого/правого отступа)? У вас уже есть одинаковая ширина, но удаление края отступа означает, что у первого и последнего элемента есть дополнительное пространство для их содержимого.

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

  li {
    @include box-sizing(border-box);
    border-right: 1px solid black;

    &:first-child {
      $span: span(2 of 6) - (gutter(6)/3);
      @include span($span of 6 no-gutters);
      padding-right: gutter(6); 
    }

    &:nth-child(2) {
      $span: span(2 of 6) + (gutter(6)*2/3);
      @include span($span of 6);
    }

    &:last-child {
      $span: span(2 of 6) - (gutter(6)/3);
      @include span($span of 6 last no-gutters);
      border: 0;
      padding-left: gutter(6);
    }
  }

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

ОБНОВЛЕНИЕ (для больших желобов):

Я не совсем уверен, что вы уже пробовали, но это должно сделать это:

@include with-layout((gutters: 20px / $c-width)) {
  // your code here...
}

Вы можете заменить 20px / $c-width любой дробью, которая вам нравится. Чем больше фракция, тем больше ваши желоба.

person Miriam Suzanne    schedule 20.03.2014
comment
Эрик, Да, это правильно. Мне нужна одинаковая ширина content. Наконец-то я дошел до реализации этого. Большое спасибо. Это сработало идеально! - person Cofey; 25.03.2014
comment
Я возился с вашим кодом и хотел бы удвоить количество отступов между содержимым и границами. Это выглядит правильно с первым и последним дочерним элементом, если я изменю желоб (6) на желоб (3), но я не могу заставить второго ребенка иметь такое же количество отступов. Как это можно сделать? - person Cofey; 25.03.2014
comment
Чтобы получить более широкие желоба, я бы оставил всю математику как есть и изменил настройку gutters, чтобы она была большей дробью по отношению к размеру столбца. Дополнительную информацию см. в документации. - person Miriam Suzanne; 26.03.2014
comment
Эрик, я пытался понять это дольше, чем хотел бы признать. Я прочитал документы и не могу найти примеров того, как это сделать. Я пытался использовать миксин with-layout(), чтобы удвоить размер желоба, уменьшить желоб (6) до желоба (3), использовать переопределение желоба и т. д., но ничего не работает. Не могли бы вы привести пример? Я так растерялся! - person Cofey; 28.03.2014
comment
Добавил примечание, но здесь я работаю вслепую, так как не знаю, что вы пробовали и какие результаты получили. - person Miriam Suzanne; 31.03.2014