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

Question

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

javascriptjqueryhtmlcssresponsive-design

3

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

在桌面上，每一行有4个块。

在平板电脑上，每一行有3个块。

在手机上，每一行有2个块。

我想在所有尺寸上在每一行块之间添加一条水平线。目前，我在每个块上都有一个下边框，但如果您有空白空间（例如，4列网格中的3个块），则该线不会延伸到整个页面宽度。

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

有人知道CSS解决方案吗？

这张图片可以说明我想要实现的效果：

- Benny b

3

jsfiddle是什么？ - mpower

1

展示一些代码吧。我们很不错...但并不是那么厉害。 - Phlume

1

代码只是一个左浮动的div列表。这张图片应该能够展示我想要实现的效果：http://s24.postimg.org/xvnak124l/css_grid.gif一个页面可以有任意数量的块。分割线需要填满整个宽度，无论一行中有多少块。 - Benny b

2个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- dap.tci · 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*/
}

- Ruskin · Answer 2

如果旧浏览器的支持不是问题，您可以插入一些: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)）。