如何突破基础行并坚持视口的右边缘
How to break out of foundation row and stick to right edge of viewport
我在 codepen 上有一个 zurb 基础网格的例子。我正在想办法将 div 扩展到视口的右边缘,但在调整视口大小时使左边缘与网格保持一致。
<div class="row">
<div class="large-12 columns">
<div class="my-custom-block">
MY CUSTOM BLOCK ==> Please extend to right edge of viewport
</div>
</div>
</div>
更新
我不介意解决方案是否在网格之外并且不使用 Foundation。我只希望我的组件与网格的开头相匹配,但在调整大小时保持与视口右侧齐平。
问题是第 class 行定义了 width/max-width,上面有 margin:auto
。如果您不介意将行更改为百分比最大宽度,您可以这样做:
.row {
max-width: 62.5%;
}
.special-row {
overflow:hidden;
width: 100%;
float: right;
margin-right: 0;
margin-top: 0;
margin-bottom: 0;
//this is halfway between the 62.5% above and 100%
max-width: 81.25%;
}
我在 codepen 上有一个 zurb 基础网格的例子。我正在想办法将 div 扩展到视口的右边缘,但在调整视口大小时使左边缘与网格保持一致。
<div class="row">
<div class="large-12 columns">
<div class="my-custom-block">
MY CUSTOM BLOCK ==> Please extend to right edge of viewport
</div>
</div>
</div>
更新 我不介意解决方案是否在网格之外并且不使用 Foundation。我只希望我的组件与网格的开头相匹配,但在调整大小时保持与视口右侧齐平。
问题是第 class 行定义了 width/max-width,上面有 margin:auto
。如果您不介意将行更改为百分比最大宽度,您可以这样做:
.row {
max-width: 62.5%;
}
.special-row {
overflow:hidden;
width: 100%;
float: right;
margin-right: 0;
margin-top: 0;
margin-bottom: 0;
//this is halfway between the 62.5% above and 100%
max-width: 81.25%;
}