css - Susy 中的 float 元素具有均匀的宽度、填充和边框

Question

我在尝试 float 三个列表项时遇到问题，以便所有三个列表项的内容区域具有相等的宽度，并且每个垂直边框旁边的左/右填充量相等。第一个 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() 函数来计算您需要的确切宽度(从外部元素中删除一些装订线宽度，并添加它宽度到内部)，然后将结果传递给创建布局的 span mixin。

更新(对于更大的排水沟):

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

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

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