Box of different height fit equal Pinterest

Asked

Viewed 249 times

1

I’m with a problem, I’m not able to leave the blocks of different heights (height) more or less equal to Pinterest, in my case are two columns respecting the following responsive rule col-xs-12 col-sm-12 col-md-6, that is, two desktop speakers, and a column for mobile and tablet.

I made an example more or less in https://jsfiddle.net/bwnmaq1s/ the idea is todos the boxes respect the margin-bottom definite.

Here’s the picture of my problem

inserir a descrição da imagem aqui

Obs.: The boxes are included dynamically, I never know what will come after and how high it will, it will depend on the actions of users.

twitter-bootstrap css3 bootstrap-3

4 answers

0

  • 1

    I tried to use this Waterfall but it changes the width of my box leaving small and disfigure my layout, I will try to do the same in your example.

  • Poutz tried to make his example here, gave more or less certain still has an error ... look at the image http://ap.imagensbrasil.org/image/pUQCS ... the text box should be whole on the right side and the picture boxes one on top of the other.

  • I’m trying to use Waterfall now but I can’t leave it with two columns kind ta working but the boxes get very small and do not get two columns

0

Hello, you can create a script for this or use display table. You can also put one clearfix every 2, and they got the same line. With jquery, you can do the following: 

<html>
<body>
    <script>
    $(document).ready(function () {<br>
        var a = $('.altura_eventos').height();<br>
        $('.imagem_evento_ita').css("min-height", a);<br>

    });
    </script>
</body>
</html>

Take the div height of the two events together and apply it to the two events with min-height. He will always take the height of the greatest in the case.

  • I don’t quite understand. In my case the cards are added dynamically never know which card will come and what size of it Iss ovai depends on the user action, it’s like a social network!

0

Every 2 li’s you place opens a div and sets the clearfix class. She’s gonna leave you both on the same line. Any other problem, you put min-height and it will work. For example, a min-height in the Li’s that you have there or in the container where you take the yellow image or the writing.

0


Erick what I’ve achieved regarding your doubt is the call Layout Grid Masonry which is almost the same thing as the Waterfall of Rboschini’s response, it is well applied here.

Initially, he is done with Jquery, but there is a way to be done with CSS only.

From your example I did the following, as you are using the class col-md-6 Bootstrap and this is equivalent to a breakpoint of at least 970px, so I created a Media querie with these definitions:

@media (min-width: 970px) {
  .container {
    -moz-column-count: 2;
    -moz-column-gap: 10px;
    -moz-column-width: 50%;
    -webkit-column-count: 2;
    -webkit-column-gap: 10px;
    -webkit-column-width: 50%;
    column-count: 2;
    column-gap: 10px;
    column-width: 50%;
  }
}

What is inside the .container is what will make the magic, the column css. The problem is that apparently there is a conflict of this with Bootstrap, and the fact that it cuts divs. The way to solve it is by applying a overflow: auto, one height: 100% in the .container and still within the querie apply to article one break-inside: avoid-column and a -webkit-column-break-inside: avoid. Would look like this: 

@media (min-width: 970px) {
  .container {
    margin: 2em 0;
    overflow: auto;
    height: 100%;
    -moz-column-count: 2;
    -moz-column-gap: 10px;
    -moz-column-width: 50%;
      -moz-column-fill: auto;
    -webkit-column-count: 2;
    -webkit-column-gap: 10px;
    -webkit-column-width: 50%;
    -webkit-column-fill: auto;
    column-count: 2;
    column-gap: 10px;
    column-width: 50%;
      column-fill: auto;
  }
  article{
    break-inside: avoid-column;
    -webkit-column-break-inside: avoid;
  }
}

Jsfiddle

Jsfiddle Fullscreen

But this is all very relative so test it on your model and let me know anything...

  • Cool Sami very good answer, I used this Masonry and ta almost the way I want, there’s only one thing intriguing me here I will try to solve it. Thank you again very much.

Browser other questions tagged twitter-bootstrap css3 bootstrap-3

You are not signed in. Login or sign up in order to post.