Question

我遇到了与其他内容对齐的画廊问题。我正在使用带有填充的容器，我正在通过gutters，并且图库是跨度的填充，加上排水沟的填充物。

我想让它们对齐。

HTML：

<header id="header">
  <div class="container">
    header
  </div>
</header>
<div id="content">
  <div class="gallery">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>
<div id="sidebar">sidebar</div>

CSS：

@import "susy";

$susy: (
    columns: 12,
    gutter-position: inside,
    global-box-sizing: border-box
);

@mixin container-padding($padding: gutter())  {
    padding: 0 $padding 0 $padding;
}

$gallery_layout: (
    columns: 12,
    gutters: 1/10,
    gutter-position: split
);

@include border-box-sizing;

.container {
    @include container;
    @include container-padding;
}

.gallery {
    > .item {
        @include with-layout($gallery_layout) {
            height: 250px;
            margin-bottom: gutter() * 2;
            background-color: brown;

            @include span(2);
        }

    }
}

#header {
  height: 80px;
  background-color: blue;
}

#content {
  @include span(9);
  background-color: yellow;
}

#sidebar {
  @include span(3);
  background-color: red;
  height: 515px;
}

请注意; margin-bottom: gutter() * 2;归因于排水沟的分流。

Example running here.

@EDIT

它可以做到这一点：

$gallery_layout: (
    columns: 12,
    gutters: 1/10,
    gutter-position: after
);

但唯一的问题是它在末尾留下了一个空的空间并且没有填满整个div。 - Example here.

Answer 1

尝试使用gallery mixin：@include gallery(2);

这是the updated pen

将图库与其他内容对齐

1 个答案: