Javascript 为什么容器边框会弄乱项目的massy.js放置?

Javascript 为什么容器边框会弄乱项目的massy.js放置?,javascript,jquery,html,css,masonry,Javascript,Jquery,Html,Css,Masonry,我正在使用我的瓷砖砖石布局 问题:我的瓷砖脱落了几个百分点,因此它们是重叠的,没有居中的,看起来不像它应该的那样。我将问题或至少部分问题追溯到我的容器的边框为10px 有鉴于此,我的解决方案是从瓷砖的宽度中减去该边界,就像这样width:calc(100%-25px),还减去10px的容器填充和5px的平铺填充 这阻止了瓷砖重叠,但是仍然没有达到预期的效果: -->它们没有居中,右侧有一个奇怪的间隙 下面是我的CSS: /*砌体*/ .mod_目录Versalview.Mashise_列表{

我正在使用我的瓷砖砖石布局

问题:我的瓷砖脱落了几个百分点,因此它们是重叠的,没有居中的,看起来不像它应该的那样。我将问题或至少部分问题追溯到我的
容器
边框
10px

有鉴于此,我的解决方案是从瓷砖的宽度中减去该边界,就像这样
width:calc(100%-25px)
,还减去10px的
容器填充和5px的
平铺填充

这阻止了瓷砖重叠,但是仍然没有达到预期的效果:

-->它们没有居中,右侧有一个奇怪的间隙

下面是我的
CSS

/*砌体*/
.mod_目录Versalview.Mashise_列表{
&>* {
框大小:边框框;
}
填充:10px;
}
.ctlg_摘要{
不透明度:0;
浮动:左;
转变:不透明度;
/*垂直排水沟*/
边缘底部:10px;
填充物:5px;
}
.ctlg_摘要{
宽度:计算(100%-20px);
}
@仅介质屏幕和(最小宽度:400px){
.ctlg_摘要{
宽度:计算(50%-25px);
}
}
@仅介质屏幕和(最小宽度:800px){
.ctlg_摘要{
宽度:钙(33.33%-25px);
}

}
我建议您将
砌体列表
包装在容器中,并将边框等样式从
砌体列表
移动到容器

这是因为,当您在
.marysish\uu列表
上应用砌体时,砌体试图测量内容的高度和宽度,并注入其自己的样式以保持
.marysish\uu列表
的高度。这可能会导致您的
.marysish\u列表
布局消失

在此处查看从您的扩展而来的更新代码笔:

.container{
边框:实心10px红色;
位置:相对位置;
最大宽度:1000px;
保证金:自动;
填充:10px;
&, * {
框大小:边框框;
}
}


边界的用途是什么?它们是用来在瓷砖之间创造一些空间的吗?在这种情况下,您可以在砖石结构中使用
檐沟
选项。@volt所有边框、
容器
瓷砖
,都是我必须实现的设计的一部分。我通过在
平铺
上添加
填充
创建了
边沟
。使用“排水沟”选项也可以,但问题依然存在。有些东西,我不知道是什么,一直把瓷砖推到左边。我注意到,当我调整窗口大小时,最初它是合适的,然后瓷砖以最小的向左推力固定到位。如果不看完整的工作示例,就有点难以找出问题所在。请考虑创建一个工作片段,模仿你在网站上的情况。