我有两个彼此相邻的独立图像,我希望它们是连续的。问题是我需要将最右边的图像移到左边。我可以使用span
mixin (narrow | wide )
的大小修饰符,但这会改变两个相应图像相对于一个antoher的比例。
相反,我需要暂时移除排水沟,将流中的第二张图像移到左侧。
我在他的旧帖子中读到:https://stackoverflow.com/a/13044025我可以使用with-grid-settings,
现在with-layout.
但是,似乎没有关于如何完成此特定操作的任何文档。
执行此类任务的正确方法是什么?
提前致谢
- 编辑 -
HTML(简体)
<main id="grid">
<section id="main_background_container">
<img id="main_side_img"></img>
<div id="main_primary_container"></div>
</section>
</main>
SCSS
#grid{
@include container(8);
@include background-grid;
}
#main_background_container{
@extend %debug;
@include span(8);
height: auto;
float: right;
margin-top:-16px;
}
#main_side_img{
height: 65%;
@include span(1 no gutter);
}
#main_primary_container{
@include span(4 wide);
background-image: url('../images/background-2b.png');
background-position: top;
background-size: cover;
height: 65%;
}
答案 0 :(得分:1)
with-layout
mixin使用设置图或简写语法或两者的任意组合接受任何布局定义 - 类似于其他Susy mixins。但我不认为这就是你想要的。更改装订线尺寸实际上会更改网格数学,并且元素不会对齐。我想你想要这样的东西(我正在制作,因为我看不到你的代码):
.left-area {
@include span(3 no-gutter); // remove the gutter here
}
.right-area {
@include span(9 wide); // span across what would have been the gutter
}