[英]setting nested element width to column width
I'm having some troubles to find the right way to approach this problem: 我在寻找解决该问题的正确方法时遇到了一些麻烦:
I've got a situation like the following: 我遇到以下情况:
<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>
Now within a 12 cols grid, I've got that .section
is defined as: 现在在12列网格中,我将.section
定义为:
.section {
position: relative;
@include span(6);
}
and so far so good. 到目前为止,一切都很好。 Now I've defined the .title
to be hover the image like: 现在,我已将.title
定义为将图像悬停在以下位置:
.title {
display: block;
position: absolute;
bottom: 0;
}
[edit] the configuration I'm using has got the following definition: [编辑]我正在使用的配置具有以下定义:
susy: (
gutter-position: inside;
);
but I can't use width: 100%;
但我不能使用width: 100%;
because it won't work, and I do need to manually give it a width
, whereas a value computed out of span()
won't work eg width: span(6 of 6);
因为它不起作用,所以我需要手动给它设置一个width
,而从span()
计算出的值将不起作用,例如width: span(6 of 6);
due to the gutter-position
that sets the padding instead of the margin. 由于gutter-position
而不是边距的gutter-position
。
Is there any good or consistent way to go around this problem? 有什么好的或一致的方法来解决此问题?
Should I just stick to the default after
or before
for gutter-position
? 我应该before
gutter-position
after
还是before
使用默认gutter-position
吗?
You need to set the left
property in order to align your title with the container, and then you can either set right
or width
to get the full width: 您需要设置left
属性,以使标题与容器对齐,然后可以设置right
或width
以获得完整宽度:
.title {
display: block;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
or 要么
.title {
display: block;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.