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

【问题标题】：setting nested element width to column width将嵌套元素宽度设置为列宽
【发布时间】：2016-06-11 10:42:06
【问题描述】：

我很难找到解决这个问题的正确方法：

我遇到了如下情况：

<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 列网格内，我知道 .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 设置了填充而不是边距。

有什么好的或一致的方法可以解决这个问题吗？

对于gutter-position，我应该坚持使用默认的after 还是before？

【问题讨论】：

标签： susy-compass susy susy-sass

【解决方案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%;
}

【讨论】：