html – CSS – 具有相等边距和固定大小块的响应网格

2023年9月1日 186次阅读

我试图突破CSS的限制来复制印刷中常见的网格布局.

要求 ：

>块之间以及块之间和容器边缘之间的边距必须相等.
>布局必须是响应式的,并且每行上的块数必须适应窗口的大小.
>最后一行必须左对齐
>块的宽度/高度是固定的
>不使用空的非语义HTML元素
>纯CSS解决方案,没有JS

所以,我有这样的标记：

<ul>
    <li>
       <img src="thumbnail.jpg">
       <span>Introduction and Curriculum</span>
    </li>
    <li>
       <img src="thumbnail.jpg">
       <span>Equipment and Workspace Prep</span>
    </li>
    ...
</ul>

这是我想要的模型.

最佳答案 您可以使用CSS
calc() function.虽然它不会阻止使用媒体查询,但它可以计算元素和容器边缘之间的边距.

DEMO

该演示使用：

> calc()CSS函数.在这种情况下,它将得到IE9的支持.您可能希望为某些webkit浏览器添加-webkit-前缀.有关详细信息,请参阅canIuse.
> 4个媒体查询,以相应地更改一行中显示的元素数量和边距.
>内联块元素.这涉及处理空白区域(在演示中我使用了字体大小的技术,但你可以使用另一个,see here).

说明：

媒体查询断点：

它们是根据元素的宽度计算的.由于每个元素的宽度为200px,我应该选择屏幕宽度= 400px / 600px / 800px / 1000px的断点,但是当媒体查询包含滚动条时,这些值的元素将没有足够的空间并且相互重叠.

每个浏览器上的滚动条宽度不同,因此我选择了更高的值以确保不会发生重叠.

以下是具有“逻辑”媒体查询断点的此行为的example.

保证金计算：

首先,百分比边距和填充总是根据容器的剩余宽度(exception)计算,因此顶部和底部边距/填充具有与左/右边距相同的计算.

基本上,边距大小的计算是：

(remaining width (=100%) - the sum of grid elements width) / number of gaps

但

左侧和顶部间隙是从容器填充的,而其他间隙是块元素的右侧和底部边缘.块的边际计算必须考虑到这一点,并且除以间隙数-1.

HTML：

<ul id="container">
    <li class="block">...</li>
    <li class="block">...</li>
    ...
</div>

CSS：

#container{
    font-size:0;    
    padding-top: calc((100% - 1000px)/6);
    padding-left:calc((100% - 1000px)/6);}

.block {
    font-size:20px;
    width: 200px;
    height: 200px;
    display:inline-block;
    margin-right: calc((100% - 1000px)/5);
    margin-bottom: calc((100% - 1000px)/5);
}

@media screen and (max-width: 430px) {
    .block {
        margin: calc(50% - 100px);
    }
}

@media screen and (min-width: 431px) and (max-width: 630px) {
    #container{
        padding-top: calc((100% - 400px)/3);
        padding-left:calc((100% - 400px)/3);
    }
    .block {
        margin-right: calc((100% - 400px)/2);
        margin-bottom: calc((100% - 400px)/2);
    }
}
@media screen and (min-width: 631px) and (max-width: 830px) {
    #container{
        padding-top: calc((100% - 600px)/4);
        padding-left:calc((100% - 600px)/4);
    }
    .block {
        margin-right: calc((100% - 600px)/3);
        margin-bottom: calc((100% - 600px)/3);
    }
}
@media screen and (min-width: 831px) and (max-width: 1030px) {
    #container{
        padding-top: calc((100% - 800px)/5);
        padding-left:calc((100% - 800px)/5);
    }
    .block {
        margin-right: calc((100% - 800px)/4);
        margin-bottom: calc((100% - 800px)/4);
    }
}
点赞