Box of different height fit the same Pinterest

Question

Box of different height fit the same Pinterest

Navigation

#1 by (1 votes)
#2 by (1 votes)
#3 by (0 votes)
#4 by (0 votes)

1

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

I've done an example more or less on the link idea is todos boxes respect% set%.

Here's the image of my problem

Note: Boxes are included dynamically, I never know what will come next and how high it will depend on the actions of the users.

css3 twitter-bootstrap bootstrap-3

asked by anonymous 29.12.2015 / 13:11

4 answers

1

You can use column-width and column-gap as I used in this example Pinterest example

Or use a lib that does this for you, an example is the lib waterfall link

See which way you want to go, any questions, just ask.

29.12.2015 / 13:31

0

Hello, you can create a script for this or use display table. You can also put a 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>

Get the div height of the two events together and apply it to the two events with min-height. It will always catch the height of the biggest in case.

29.12.2015 / 13:35

0

Every 2 li's you place opens a div and places the clearfix class. She'll leave them 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 itself where it picks up the yellow image or the writing.

29.12.2015 / 13:57

Doubt with ng-pattern entry number with 2 decimal places - angularjs How to create a menu with jquery that accomplishes this effect after the scroll?

score 1 · Accepted Answer

Erick what I got about your question is the Grid Layout Masonry which is about the same as the Waterfall of the RBoschini response, it's well implemented here .

Initially, it's done with Jquery , but there's a way to do it with CSS only.

From your example I've done the following, since you're using the Bootstrap% class and this is equivalent to a breakpoint of at least 970px , so I created a Media querie with these settings:

@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's inside col-md-6 is what will do magic, .container of css. The problem is that there is apparently a conflict of this with Bootstrap, and the fact that it makes a cut in column . The way to solve is by applying divs , overflow: auto in height: 100% and still within .container apply to article a querie and break-inside: avoid-column . It 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 that's all very relative so test it on your model and let me know anything ...