Clearing rows of floating blocks with different heights

Question

I use a slightly modified Soh Tanaka Smart Columns , but in his example all the blocks / columns are the same height. If I have divs with different heights, the technique breaks, as in the following jsfiddle . I don’t like the way DeSandro Masonry handles the height problem because it breaks the blocks depending on the size of the window, so the list loses its implied sequential ordering, so I am exploring another solution.

The solution I'm trying to make is this , but I have a problem trying to clear the sides of the lines / lines. I can use javascript to insert <span style="clear: both;"></span> at the end of each line / line, but this causes more problems when resizing the window and when there are several groups of such smart columns on the same page. Although I'm sure I can write a script to address these cases, I think there might be an easier way.

What is the easiest way to make it such that when a list of floating blocks needs to be wrapped, it should start at the bottom of the highest window in the previous line / line? Only a CSS solution is preferred, but a javascript / jQuery based solution is acceptable.

To rephrase it differently, I want to float in blocks, for example, as "floating" letters of different sizes (letters by default are aligned vertically by default, although for div blocks, the upper alignment probably looks better):

Answer 1

You can switch from float: left to display: inline-block; vertical-align: top display: inline-block; vertical-align: top .

http://jsfiddle.net/thirtydot/LCDDD/1/

I also added a tiny bit of JavaScript:

 $(this.config.column_selector).contents().filter(function() { return this.nodeType === 3; }).remove(); 

inline-block , unfortunately, is affected by a space in HTML, so the fragment removes text nodes between li elements. In addition, there are CSS fixes (with minuses), or you can just remove the spaces in your HTML .

Answer 2

I don’t know, this is what you are looking for, but I think I had a similar problem. In my opinion, I wrote this little plugin (although this name is a bit unsuitable for its function):

 (function($) { $.fn.extend({ fixLineBreak: function(css) { var minLeft = $(this).position().left; return $(this).each(function() { var position = $(this).position(); if (position.left > minLeft && $(this).prev().position().left >= position.left) { $(this).css(css); } }); } }); }(jQuery)); 

You would use it like this:

 $('#my_boxwrapper li').fixLineBreak({ clear: 'left' }); 

Demo: http://jsfiddle.net/v79Cu/

Answer 3

As mentioned thirty, the built-in unit is definitely suitable for promotion. You can, of course, achieve this only with CSS.

On your wrapper (I think you called it "column"), give it the following css:

 .col-group { font-family: monospace; /* for spacing columns correctly */ letter-spacing: -.65em; /* this too */ margin-left: -1em; margin-right: -1em; text-align: left; /* center or justify for columns in last row */ display: block; } 

Then on your columns (I think you called this "field"), apply this css:

 .box { font-family: Serif; /* be sure to reset the font and letter-spacing */ letter-spacing: normal; display: inline-block; padding-left: 1em; padding-right: 1em; position: relative; float: none; text-align: left; vertical-align: top; /* align row columns along top or baseline */ box-sizing: border-box; } 

I have not used Smart Columns, but it seems that it can work very well in tandem with this css, since it only changes the width, right?

In either case, you can check out a working example or play this script with it. I call it the "Inline-Block Grid" and I wrote a blog post about it.