显示网格-背景右侧有一个白色缝隙

蓝天

.parent{
display:grid;
grid-template-columns:50% 50%;
grid-gap:5px;
width:50%;
height:54px;
background:gold;
}

.left, .right{border:2px solid blue;}
<div class='parent'>
<div class='left'></div>
<div class='right'></div>
</div>

为什么右侧有白色垂直间隙(大约2个像素)?

肖恩·麦克

用百分比设置网格项目的宽度不会解决grid-gap,因此50%+ 5px + 50%超出了网格的宽度(100%)。

使用fr单位而不是百分比来解决此问题:

.parent{
display:grid;
grid-template-columns: 1fr 1fr;
grid-gap:5px;
width:50%;
height:54px;
background:gold;
}

.left, .right{
    border: 1px solid blue;
}
<div class='parent'>
    <div class='left'></div>
    <div class='right'></div>
</div>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

奇异背景网格未显示

另一个CSS网格内的CSS网格显示为父网格

我的页面右侧有一个奇怪的缝隙

2D白色网格未显示在背景上方

仅使用一个属性显示/隐藏网格

通过使用CSS图像显示背景网格

在 React 中构建的页面使用 Coldfusion 显示网格在网格中有一个按钮来显示模态。HTML 显示但不显示 JS

监视网格:显示所有行

大网格CSS没有图片显示

显示带有动画的按钮网格?

如何统一显示网格线?

jqgrid每列都有一个信息面板,使网格显示滚动

在另一个顶部显示一个网格

EasyUI:使用“ fitColumns:true”的网格将显示白色区域

在WPF网格中显示带有索引的一维数组

使用显示内联和锚标记后,为什么在右侧有一个小标记?

如何创建一个与另一个网格重叠的网格,并在第二个网格中显示第一个网格的某些控件

绘制一个包含 32 个单元格的网格,中间矩形不显示

如何屏蔽显示在背景 BufferedImage 顶部的网格 BufferedImage

引导网格系统困惑,试图将所有内容显示为一个中心列的多行

将应用程序从随机显示一个报价切换到网格中的所有报价

下拉列表未显示在剑道网格 detailInit 网格的所有行中

第一个选项卡面板不显示网格中的数据(IE 9)

仅对齐一个网格项目以居中显示材质UI

角度ui网格分组显示组行中的第一个元素

如何在yii2的网格视图中显示另一个表的数据?

在另一个顶部显示网格 删除重叠 渲染订单| Three.js

在另一个窗口中显示数据网格行中的链接表

以不同的形式同时显示两个不同的网格