css responsive grid - 行之间的水平线答案

【问题标题】：css responsive grid - horizontal line between rowscss responsive grid - 行之间的水平线
【发布时间】：2014-02-05 13:08:44
【问题描述】：

我有一个带有内容块网格的响应式布局。

在桌面上每行是 4 个块

在平板电脑上，每行是 3 块

在手机上每行是 2 块

我希望在所有尺寸的每行块之间都有一条水平线。目前我在每个块上都有一个边框底部，但如果你有一个空白空间（例如 4 列网格上的 3 个块），该行不会扩展页面的整个宽度

我能想到的唯一方法是使用 JS 将每一行包装在一个容器中，并在每次调整屏幕大小时重新加载该函数。

有人知道 CSS 解决方案吗？

这张图片应该展示我想要实现的目标：

【问题讨论】：

jsfiddle 什么的？
请显示一些代码。我们很好......但不是那么好
代码只是一个向左浮动的 div 列表。这张图片应该展示我想要实现的目标：s24.postimg.org/xvnak124l/css_grid.gif 一个页面可以有任意数量的块。无论一行多少块，分割线都需要填充宽度。

标签： javascript jquery html css responsive-design

【解决方案1】：

如果旧的浏览器支持不是问题，您可以在代码插入之前放置一些 :before 或 :after 以在每行开始之前插入内容

例如像

<!DOCTYPE html>
<html>
<head>
<title>Quick and dirty border demo</title>
<style>

div {width: 47%; float:left; border: 1px solid #333; margin:1em 5px}

div:nth-child(2n+1):before {
    content:'';
    border-bottom:1px solid green;
    position:absolute;
    display:block;
    width: 100%;
    margin-top: -1em;
}

</style>
</head>

<body>

    <div>a</div>
    <div>a</div>
    <div>a</div>
    <div>a</div>
    <div>a</div>
    <div>a</div>
    <div>a</div>
    <div>a</div>
    <div>a</div>

</body>
</html>

每个媒体查询使用不同的模式（3n+1 等）。

如果您不想在第一行上方有边框，请使用 (2n+3), (3n+4) ... (xn+(x+1))

【讨论】：

将其与 dap.tci 混合
谢谢，将使用modernizr条件来解决这个问题，只为旧浏览器上的每个内容块添加一个边框底部。
通过巧妙的边框定位，您可以在 CSS 中完成所有工作 - 如果您将插入的边框放在 div 边框的顶部......根本没有 JS 并且页面尺寸更小。

【解决方案2】：

您可以使用一些 CSS 媒体查询来代替 javascript：

@media (max-width:768px) { /*Extra small devices - Phones (<768px)*/
    /*css here to show only the horizontal line for this size*/
}

@media (min-width:768px) { /*Small devices - Tablets (≥768px)*/
    /*css here to show only the horizontal line for this size*/
}

@media (min-width:992px) { /*Medium devices - Desktops (≥992px)*/
    /*css here to show only the horizontal line for this size*/
}

@media (min-width:1200px) { /*Large devices - Desktops (≥1200px)*/
    /*css here to show only the horizontal line for this size*/
}

【讨论】：

啊，好吧，所以我将我的分割线添加为一个元素。因此，在每个具有“四”类的第 4 个元素之间添加一个分隔线在每个具有“三”类的元素之间添加一个分隔线，然后使用媒体查询来显示隐藏相关的分隔线。
是的！但是，如果您将我的答案与@Ruskin 的答案混合在一起会更好。
是的，我以为它是一个响应式页面，其中已经有@media 查询。