Question

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

桌面上的

每行是4个块

平板电脑上的每一行都是3块

在电话上每行是2个块

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

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

有人知道CSS解决方案吗？

此图片应展示我正在努力实现的目标：

Answer 1

您可以使用一些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*/
}

Answer 2

如果旧浏览器支持不是问题，您可以在代码插入之前或之后添加一些：在每行开头之前插入内容

e.g。

之类的东西

<!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））

css响应网格 - 行之间的水平线

2 个答案: