Geek asks and answers

CSS and HTML fields are small but out of order

That's right, it's a little difficult to explain, but what I follow is as follows:

I have a database of messages that will go into an HTML page. Obviously, all these messages will be of different sizes, so the boxes containing them will have different sizes.

What I need is a way to make all of these fields look perfect, with each other, as in the image below, for example. If the first post is small, then it will start, for example, a line with small boxes. And they will not necessarily be the same height. In the picture, each post is numbered to show where it enters the message array.

See the illustration I made here:

enter image description here

Is it possible? I guess I will need Javascript, perhaps JQuery is preferable.

.

+3
1

Javascript, , jQuery Masonry " " .

, :

<div id="container">
  <div class="item">...</div>
  <div class="item">...</div>
  <div class="item">...</div>
  ...
</div>

float: left .item s #container:

$(function(){
  $('#container').masonry({
    // options
    itemSelector : '.item',
    ...
  });
});

no-jQuery, jQuery

+3

More articles:


All Articles