css responsive grid - horizontal line between rows

问题

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:

回答1:

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))

回答2:

You can use some CSS media queries instead of 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*/
}

来源：https://stackoverflow.com/questions/21164964/css-responsive-grid-horizontal-line-between-rows

标签

javascript

jquery

html

css

responsive-design