CODEWITHSUNDEEP
htmlcss
Szabolcs
Szabolcs

Reputation: 1533

When there are multiple divs in a row, how to avoid getting the next row line up at the bottom of the highest div?

I have a bunch of divs in a document, each div's width is 32%, but their heights vary.

CSS:

        body{
            text-align: center;
        }
        div{
            vertical-align: top;
            display:inline-block;
            border-style:solid;
            width:32%;
        }
        .a{
            background-color: lightcoral;
            height:200px;
        }
        .b{
            background-color: lightseagreen;
            height:500px;
        }

HTML: 

 <body>
    <div class="a"></div>
    <div class="a"></div>
    <div class="b"></div>
    <div class="a"></div>
    <div class="b"></div>
    <div class="a"></div>
    <div class="b"></div>
    <div class="a"></div>
    <div class="a"></div>
</body>

The problem is that when the new line starts, each div on the line is positioned at the same y value, and I need them to be continuous, without space between the upper and lower divs. Is there a way to achieve this?

https://jsfiddle.net/pn3dz9fg/

Upvotes: 2

Views: 305

Answers (2)

Szabolcs
Szabolcs

Reputation: 1533

after googling "pintrest" layout I found a solution: CSS:

        body{
            -webkit-column-count: 3;
            -webkit-column-fill:auto;
            text-align: center;
        }
        div{
            -webkit-column-break-inside: avoid;
            vertical-align: top;
            display:inline-block;
            border-style:solid;
            width:100%;
        }
        .a{
            background-color: lightcoral;
            height:200px;
        }
        .b{
            background-color: lightseagreen;
            height:500px;
        }

https://jsfiddle.net/pn3dz9fg/3/ thx!

Upvotes: 0

Joshua Byer
Joshua Byer

Reputation: 519

https://jsfiddle.net/yq4xubph/1/

probably not exactly what you had in mind but you get the idea

<body>
      <div class='row'>
        <div class="a"></div>
        <div class="a"></div>
        <div class="b"></div>
        <div class="a"></div>
        <div class="b"></div>
       </div>
       <div class ='row'> 
        <div class="a"></div>
        <div class="b"></div>
        <div class="a"></div>
         <div class="a"></div>
        </div>

    </body>

body{
                text-align: center;
                display:inline-block;
                width:100%;
            }
            .a,.b{
                vertical-align: top;
                display:block;
                border-style:solid;


            }
            .row{
               width:32%;
               vertical-align: top;                      
               display:inline-block;              
            }

            .a{
                background-color: lightcoral;
                height:200px;
            }
            .b{
                background-color: lightseagreen;
                height:500px;
            }

Upvotes: 1

Related Questions