分享程序员开发的那些事...
更新时间：2023-11-22 23:02:58
如果旧的浏览器支持不是问题， ：在每行开始之前插入代码后插入代码
例如：类似于
<！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))