Question

我遇到了一些麻烦，无法找到解决这个问题的正确方法：

我遇到如下情况：

<ul>
    <li class="section">
        <a href="#">
            <img src="path/to/img.png">
            <span class="title">Section 1</span>
        </a>
    </li>
    <li class="section">
        <a href="#">
            <img src="path/to/img-2.png">
            <span class="title">Section 2</span>
        </a>
    </li>
</ul>

现在在12 cols网格中，我已将.section定义为：

.section {
    position: relative;
    @include span(6);
}

到目前为止一直很好。现在我已将.title定义为悬停在图像上：

.title {
    display: block;
    position: absolute;
    bottom: 0;
}

[edit]我正在使用的配置有以下定义：

susy: (
    gutter-position: inside;
);

但是我无法使用width: 100%;，因为它不起作用，我需要手动给它一个width，而从span()计算的值不会工作，例如width: span(6 of 6);由于gutter-position设置了填充而不是边距。

有没有好的或一致的方法解决这个问题？

我应该坚持after的默认before或gutter-position吗？

Answer 1

您需要设置left属性以使标题与容器对齐，然后您可以设置right或width以获得全宽：

.title {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

或

.title {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}

将嵌套元素宽度设置为列宽

1 个答案: