Align Demos

Breakfast

Lorem ipsum dolor sit

Boats

consectetuer adipiscing elit

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpsaepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum

Battersea

Typi non habent claritatem

AlignJS applys a min-height to the necessary items so that they reach the same height and appear aligned

AlignJS takes box-sizing into account

This item is using the CSS property:
box-sizing: border-box;

This item is using the CSS property:
box-sizing: content-box; which is the default style as specified by the CSS standard.

The width and height properties are measured including only the content, but not the padding, border or margin

This item is using the CSS property: box-sizing: border-box;

Align options

threshold

The threshold value can range between 0 and 1. When set to 1, all adjacent items are made the same height.When set to 0.5, an item will only be sized if it is greater than half the larger adjacent item. When set to 0 nothing will happen. The width and height properties are measured including only the content, but not the padding, border or margin. This instance is set to 0.2

targetClass

This is the class of the items required to be sized.

beforeRun

This is a function which can be executed before elements are sized

afterRun

This is a function which can be executed after elements are sized

var options = {   targetClass:'item',   threshold:0.2,   beforeRun:function(){},   afterRun(){}
}
These items are not high enough to be sized.
This item is high enough and so will be sized with the larger adjacent item.

Item Listing

image

targetClass

Nam liber tempor cum soluta nobis eleifend option congue nihil.

image

targetClass

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

image

targetClass

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

image

targetClass

Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum.

image

targetClass

Nam liber tempor cum soluta nobis eleifend option congue nihil.

image

targetClass

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

image

targetClass

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

image

targetClass

Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum.

image

targetClass

Nam liber tempor cum soluta nobis eleifend option congue nihil.

image

targetClass

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

image

targetClass

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

image

targetClass

Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum.