如何打破基础行并坚持视口的右边缘

Question

我在codepen上有一个zurb基础网格的例子。我正在尝试一种方法将div扩展到视口的右边缘，但在调整视口大小时保持左边缘与网格内联。

fill

更新 我不介意解决方案是否在网格之外并且不使用Foundation。我只是希望我的组件匹配网格的开头，但在调整大小时保持在视口右侧齐平。

example on codepen

Answer 1

问题是行类有一个定义的宽度/最大宽度，上面有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%;
}