gpt4 book ai didi

grid - 波旁/整洁: Reset margin and let nested divs span the whole width

转载 作者:行者123 更新时间:2023-12-04 04:50:01 25 4
gpt4 key购买 nike

我是波旁/整洁的新手。我有一个关于嵌套的问题:我希望红色框填充整个宽度,而彼此之间不要有排水沟。当在其上使用“@include omega”时,第一个框将删除其右边距,但是右边的框仍具有边距,并且不会调整其宽度。

您能告诉我如何使它们跨越整个父级框,而在它们之间没有任何边距吗?

这是一个演示:http://wuergeengel.net.dd13736.kasserver.com/

这是我的标记:

<div class="container">
<div class="box box-left"></div>
<div class="box box-right">
<div class="box-red-left nested"></div>
<div class="box-red-right nested"></div>
</div>
</div>

这是我的风格:
.container
{
@include outer-container;
}

.box
{
border: 1px solid black;
height: 500px;
}

.box-left
{
@extend .box;
@include span-columns(4);
}

.box-right
{
@extend .box;
@include span-columns(8);

.nested
{
border: 1px solid red;
height: 400px;


&.box-red-left
{
@extend .nested;
@include span-columns(3 of 8);
@include omega;
}

&.box-red-right
{
@extend .nested;
@include span-columns(5 of 8);
@include omega;
}
}
}

最佳答案

您可以通过几种方法来执行此操作。

  • 使用Neat的表格显示布局。例如:@include span-columns(5 of 8, table);
  • 使用Neat的基础flex-gridflex-gutter函数。例如:
    width: flex-grid(5, 8) + flex-gutter(8);
    float: left;
  • 关于grid - 波旁/整洁: Reset margin and let nested divs span the whole width,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21920610/

    25 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com