установка вложенную ширины элемента в столбце Ширина

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 смещ_по_столбцам сетки, у меня есть, что .section определяется как:

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

и до сих пор так хорошо. Теперь я определил .title быть парить изображение как:

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

[править] конфигурация Я использую получил следующее определение:

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%; 
}