Susy 中具有均匀宽度、填充和边框的浮动项目

Question

我在尝试浮动三个列表项时遇到问题，因此所有三个列表项的内容区域具有相同的宽度，并且每个垂直边框旁边的左/右填充量均等。第一个 LI 的左边缘需要对接容器的左侧，最后一个 LI 的右边缘需要对接容器。

Gist on 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>

SCSS：

// ----
// 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); }
}

我做错了什么？任何帮助将不胜感激！

Answer 1

澄清一下：你不想要相等的外部宽度，你想要相等的 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() 函数来计算您需要的确切宽度（从外部元素中删除一些间距宽度，并将该宽度添加到内部），然后将结果传递给 @ 987654325@ mixin，它会创建你的布局。

更新（对于较大的排水沟）：

我不完全确定您已经尝试过什么，但应该这样做：

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

您可以将20px / $c-width 替换为您喜欢的任何分数。分数越大，排水沟越大。