gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 13:18:43 27 4
gpt4 key购买 nike

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

在桌面上每行是 4 个 block

在平板电脑上每行是 3 个 block

在手机上每行是 2 个 block

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

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

有人知道 CSS 解决方案吗?

这张图片应该展示我正在努力实现的目标:

enter image description here

最佳答案

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

关于javascript - css 响应式网格 - 行之间的水平线,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21164964/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com