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

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

javascript jquery html css responsive-design

Javascript css响应网格-行之间的水平线,javascript,jquery,html,css,responsive-design,Javascript,Jquery,Html,Css,Responsive Design,我有一个有网格内容块的响应性布局在桌面上，每行有4个块在平板电脑上，每行有3个区块电话每行2个街区我想要一条水平线在所有尺寸的每一行块之间运行。目前，我在每个块上都有一个边框底部，但是如果你有一个空的空间（例如4列网格上的3个块），这条线不会延伸到页面的整个宽度我能想到的唯一方法是使用JS将每一行包装在一个容器中，并在每个屏幕上重新加载该函数有人知道CSS解决方案吗这张图片应该说明我正在努力实现的目标：您可以使用一些CSS媒体查询而不是javascript： @media (ma

我有一个有网格内容块的响应性布局

在桌面上，每行有4个块

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

电话每行2个街区

我想要一条水平线在所有尺寸的每一行块之间运行。目前，我在每个块上都有一个边框底部，但是如果你有一个空的空间（例如4列网格上的3个块），这条线不会延伸到页面的整个宽度

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

有人知道CSS解决方案吗

这张图片应该说明我正在努力实现的目标：

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

@media（最大宽度：768px）{/*超小型设备-手机（如果旧浏览器支持不是问题，您可以在插入代码之前或之后插入一些内容，以在每行开始之前插入内容
e、 差不多
<!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>


快速和肮脏的边界演示
div{width:47%；float:left；border:1px solid#333；margin:1em 5px}
分区：第n个子（2n+1）：之前{
内容：''；
边框底部：1px纯绿色；
位置：绝对位置；
显示：块；
宽度：100%；
边缘顶部：-1米；
}
A.
A.
A.
A.
A.
A.
A.
A.
A.

每个媒体查询使用不同的模式（3n+1等）
如果不希望在第一行上方有边框，请使用（2n+3）、（3n+4）…（xn+（x+1））
jsfiddle还是什么？请展示一些代码。我们很好……但并不是说goodCode只是一个向左浮动的div列表。这幅图应该说明我试图实现的目标：一个页面可以有任意数量的块。无论一行中有多少块，分隔线都需要填充宽度。啊，好的，所以我将我的分隔线添加为元素ent.因此，在类为“四”的每四个元素之间添加一个分隔符，在类为“三”的每三个元素之间添加一个分隔符，然后使用媒体查询来显示隐藏相关的分隔线。是的！但是，如果你将我的答案与@Ruskin one.yup混合在一起会更好。是的，我假设这是一个响应页面，已经有@media query了将其与dap.tciThanks混合使用，使用Modernizer条件只需在旧浏览器上的每个内容块中添加一个边框底部。通过巧妙地定位边框，您可以在CSS中完成所有操作-如果您将插入的边框放置在div边框的顶部…完全没有JS，页面大小更小。