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

Question

我试图突破 CSS 的极限，复制打印品中常见的网格布局。

要求:

1. block 之间以及 block 与容器边缘之间的边距必须相等。
2. 布局必须响应式，每行的 block 数必须适应窗口的大小。
3. 最后一行必须左对齐
4. block 的宽度/高度是固定的
5. 不使用空的非语义 HTML 元素
6. 纯 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>

这是我想要的模型。

Answer 1

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

DEMO

这个演示使用:

1. calc() CSS 函数。在这种情况下，IE9+ 将支持它。您可能希望为某些 webkit 浏览器添加 -webkit- 前缀。有关详细信息，请参阅 canIuse .
2. 4 个媒体查询，用于更改一行中显示的元素数量和相应的边距。
3. 内联 block 元素。这涉及处理空白(在演示中我使用了 font-size 技术，但您可以使用其他技术，see here)。

---

解释:

媒体查询断点:

它们是根据元素的宽度计算的。由于每个元素都是 200px 宽，所以我应该在 screen width = 400px/600px/800px/1000px 处选择断点，但是由于媒体查询包括滚动条，具有这些值，元素将没有足够的空间并相互重叠。

滚动条在每个浏览器上的宽度都不相同，因此我选择了一个较高的值以确保不会发生重叠。

这是一个 example这种行为与“逻辑”媒体查询断点。

margin 计算:

首先，百分比边距和填充始终根据容器的剩余宽度 (exception) 计算，因此顶部和底部边距/填充的计算与左/右相同。

基本上，边距大小的计算是:

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

但是

左侧和顶部间隙是容器的填充，其他间隙是 block 元素的右侧和底部边距。 block 的边距计算必须考虑到这一点，除以 间隙数 -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);
    }
}