css - 如何使元素脱离网格并触摸浏览器边缘

Question

请引用下图。我设置了一个网格(使用 Bourbon Neat)。第一个粉红色元素通常适合超过 5 列，但绿色元素需要从第 6 列开始，但结束时会突破网格并触及浏览器的边缘。我相当确定如果不使用 javascript 这是不可能的，但希望我能被证明是错误的!

有什么想法可以实现吗？

编辑:这需要在外部容器上使用最大宽度!

示例 HTML:

<div class="container">
 <div class="pink"></div>
 <div class="green"></div>
</div>

波本威士忌:

.container{
  @include outer-container();
}
.pink{
  @include span-columns(5);
}
.green{
  @include span-columns(7);
  // What to do here???
}

Answer 1

我有一个解决方案。它不是最漂亮的，但我确实认为它通常是对 Neat 系统的尊重。在 CodePen 上:https://codepen.io/alexbea/pen/LRxXpO .

粉色和绿色(在我的例子中是紫色和青色)最终被包裹在它们自己的容器中，这些容器完成了与网格对齐的工作。第二列通过使用等于填充的负右边距来分隔。在这种情况下，使用 vw 进行填充可以实现简单的一致性。您可能需要根据您的情况调整该值。

HTML

<div class="container">
 <div class="first"><div class="pink"></div></div>
 <div class="second"><div class="green"></div></div>
</div>

SCSS

.container {
  @include outer-container(100%);
  @include pad(2vw);
}

.first { @include span-columns(5); }
.second { @include span-columns(7); }

.pink,
.green { height: 100px; }

.pink { background-color: pink;}
.green {
  background-color: green;
  margin-right: -2vw;
}