固定的列间隙css

Question

我正在尝试制作一种布局，其中div分为一列，每列宽度为250px，这样更宽的屏幕就有更多的列。我还希望列之间的间隙在本例中保持不变，为5px。问题是，当我重新调整屏幕宽度时，间隙的大小会发生变化(尽管列保持为250px，当有足够的额外空间时，会添加或删除一个新列(。

当我将屏幕扩展到渲染新列时，额外的空间应该位于列容器的两侧；

我的集装箱如下：

#my-pages-list-holder-new-fu{
overflow-y: scroll;  
column-width: 250px;
justify-content: center;
column-gap: 5px;
}
/*my blocks which fall into the columns have this code:*/
.post-wrapper-tue{
height: fit-content;
width:250px;
margin-bottom: 10px;
-webkit-box-shadow: 1px 3px 18px -9px rgba(0,0,0,0.2);
-moz-box-shadow: 1px 3px 18px -9px rgba(0,0,0,0.2);
box-shadow: 1px 3px 18px -9px rgba(0,0,0,0.2);
}

Answer 1

试试这个：

<style>
#my-pages-list-holder-new-fu{
overflow-y: scroll;  
column-width: 250px;
justify-content: center;
column-gap: 2vw;
}
/* my blocks which fall into the columns have this code: */
.post-wrapper-tue{
height: fit-content;
width:250px;
margin-bottom: 10px;
-webkit-box-shadow: 1px 3px 18px -9px rgba(0,0,0,0.2);
-moz-box-shadow: 1px 3px 18px -9px rgba(0,0,0,0.2);
box-shadow: 1px 3px 18px -9px rgba(0,0,0,0.2);
}
</style>
<div id="my-pages-list-holder-new-fu">
<div class="post-wrapper-tue">
<text>Ze Block</text>
</div>
<div class="post-wrapper-tue">
<text>Ze Other Block</text>
</div>
<div class="post-wrapper-tue">
<text>Ze Other Other Block</text>
</div>
</div>

如果这不起作用，请记住我无法正确测试它。