Question

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

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

为了澄清：你不想要相等的外部宽度，你想要相等的内容宽度（在删除左/右边缘填充之后）？您已经具有相同的宽度，但删除边缘填充意味着第一个和最后一个元素的内容有额外的空间。

数学对此更为复杂，因为您实际上需要稍微打破网格以获得正确的外观。我想这会让你接近：

  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。分数越大，排水沟越大。

Susy的浮动物品，宽度均匀，有填充物和边框

1 个答案: