固定列间隙css

问题描述

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

将屏幕扩展到呈现新列时的额外空间应位于列容器的任一侧；

我的容器如下：

#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.2);
    -moz-Box-shadow: 1px 3px 18px -9px rgba(0,0.2);
    Box-shadow: 1px 3px 18px -9px rgba(0,0.2);
}

解决方法

试试这个：

<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.2);
    -moz-box-shadow: 1px 3px 18px -9px rgba(0,0.2);
    box-shadow: 1px 3px 18px -9px rgba(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>

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