包装网格布局-边界/填充和覆盖的问题

Packery Grid Layout - Problems with border/padding and overlay

本文关键字：覆盖 问题 填充 网格 布局 边界 包装      更新时间：2023-09-26

我一直在使用metafizzy同位素包模式进行网格布局，并在下面设置了一个codepen来向您展示我的问题。

http://codepen.io/anon/pen/EgKdpL

我对我的网格几乎很满意，除了两个问题。

1 -我给主网格选择器类"griditem"应用了填充，我希望在所有网格项周围应用一个简单的白色边缘。然而，结果好坏参半，有些差距比其他差距更小/更大。我曾尝试使用CSS边框产生相同的东西，但有同样的问题。

.grid-sizer,
.grid-item {
   margin: 0!important;
   padding: 10px!important;
}

2 -然后有一个覆盖在每个网格项目，揭示了一个标题/标题，但由于填充覆盖跑掉有没有办法阻止这种情况发生?

http://codepen.io/anon/pen/EgKdpL

谢谢你的帮助。

更新

已经从下面的答案应用到相互依赖，滚动状态现在固定和精细。正如你所看到的，尽管不均匀的边界/填充仍然存在，例如在第一个蓝色框

这对我有用:

在你的CSS代码的顶部，输入*选择器块，添加如下:

margin: 0;
padding: 0

空间的问题几乎总是浏览器添加额外的边距之类的问题，像这样简单的CSS重置应该可以解决它。要了解更多细节，请参阅Eric Meyer的CSS重置。

  1. 删除body/html标签上的页边距:

    html, body {
    margin: 0;
    padding: 0;
}

  2. #wrapper .text-overlay使用100%的宽度和高度。由于你使用的是绝对定位，你可以使用top, bottom, left, right属性。试试这个:

    #wrapper .text-overlay {
    position: absolute;
    visibility: hidden;
    background-color: RGBA(40, 44, 52, 0.9);
    font-family: 'Old Standard TT', serif;
    letter-spacing: 0.5px;
    display: block;
    margin: 0 auto;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    color: #fff;
}
相关文章：