CSS响应网格 - 行之间的水平线 [英] css responsive grid - horizontal line between rows
问题描述
我有一个内容块网格的响应式布局。每一行桌面上的每一行有
4块
<在平板电脑上，每行是3块在手机上每行是2块
我想要一个水平在所有尺寸的每一个块之间运行。此刻，我在每个块上都有一个边框底部，但是如果您有空白空间（例如，4列网格上有3个块），则该线不会延伸页面的整个宽度。
我能想到的唯一方法就是使用JS将容器中的每一行包装在一个容器中，并在每个屏幕上重新调整该函数的大小。
任何人都知道的CSS解决方案？
这张图片应该展示我想要达到的目标：
如果旧的浏览器支持不是问题， ：在每行开始之前插入代码后插入代码
例如：类似于
<！DOCTYPE html>
< html>
< head>
< title>快速和肮脏的边框演示< / title>
< style>
div {width：47％;向左飘浮; border：1px solid＃333; margin：1em 5px}
$ b $ div：nth-child（2n + 1）：before {
content：'';
border-bottom：1px纯绿色;
位置：绝对;
display：block;
宽度：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））
I have a responsive layout with a grid of content blocks.
on desktop each row is 4 blocks
on tablet each row is 3 blocks
on phone each row is 2 blocks
I want a horizontal line to run between each row of blocks on all sizes. At the moment I have a border bottom on each block but the line doesn't extend the full width of the page if you have an empty space (eg 3 blocks on a 4 column grid)
The only way I can think of doing it is to wrap each row in a container using JS and reload that function on each screen resize.
Anyone know of a CSS solution?
This image should demonstrate what I'm trying to achieve:
If old browser support is not an issue, you could put some :before or :after code insertion to insert stuff before the start of each row
e.g. something like
<!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>
With different patterns (3n+1 etc) for each media query.
If you don't want a border above the first row, use (2n+3), (3n+4) ... (xn+(x+1))
这篇关于CSS响应网格 - 行之间的水平线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
