Foundation 6 具有完全对齐的外边缘的砌体效果?
Foundation 6 masonry effect with perfectly aligned outer edges?
使用 Foundation 6 有没有办法创造这种效果?这很难描述,但很容易想象。
我们想要的是一个大块,然后是两个小块的侧边栏。三个块的外边缘应对齐以形成一个矩形。
我们试过嵌套,但没有用。
我们正在使用 the XY grid,但如有必要,愿意返回到其他基金会网格。
XY 网格通过一些嵌套来支持这一点,并在外部网格中添加 fluid
class 以强制子项伸展。
@import url('//cdnjs.cloudflare.com/ajax/libs/foundation/6.5.1/css/foundation.min.css');
body {
padding: 30px;
}
.content-cell {
background: #f4f442;
text-align: center;
}
<div class="grid-x fluid grid-margin-x">
<div class="small-9 cell content-cell">small 9</div>
<div class="small-3 cell">
<div class="grid-y grid-margin-y">
<div class="small-6 cell content-cell">small 6</div>
<div class="small-6 cell content-cell">small 6</div>
</div>
</div>
</div>
使用 Foundation 6 有没有办法创造这种效果?这很难描述,但很容易想象。
我们想要的是一个大块,然后是两个小块的侧边栏。三个块的外边缘应对齐以形成一个矩形。
我们试过嵌套,但没有用。
我们正在使用 the XY grid,但如有必要,愿意返回到其他基金会网格。
XY 网格通过一些嵌套来支持这一点,并在外部网格中添加 fluid
class 以强制子项伸展。
@import url('//cdnjs.cloudflare.com/ajax/libs/foundation/6.5.1/css/foundation.min.css');
body {
padding: 30px;
}
.content-cell {
background: #f4f442;
text-align: center;
}
<div class="grid-x fluid grid-margin-x">
<div class="small-9 cell content-cell">small 9</div>
<div class="small-3 cell">
<div class="grid-y grid-margin-y">
<div class="small-6 cell content-cell">small 6</div>
<div class="small-6 cell content-cell">small 6</div>
</div>
</div>
</div>