CSS Absolute Alignment

Method 1: Use Text-align:justify

Can be compatible with all browsers, but must have spaces between modules and modules or words, newline characters, or tabs to work

*{margin:0;padding:0;}/*Description: In 1.IE to implement block single-line justification requires the use of its private property text-align-last:justify mate, text-align-last to take effect, you must first define text-align as justify 2. line-height:0 Resolve extra whitespace at the bottom of the standard browser container*/. Demo{text-align:Justify;Text-align-last:Justify;Line-height:0;Height:44px;}/*Description: After the module uses [line break] or [whitespace], the WebKit browser will cause the last module to have extra space, use font-size:0 to clear the space*/@media All and (-webkit-min-device-pixel-ratio:0){. demo{font-size:0;}} /*Description: 1.text-align-last:justify currently only has IE support, standard browsers need to use. Demo:after pseudo-class analog similar effects 2.opera browsers need to add vertical-align:top To completely solve the extra white space at the bottom.*/. Demo:after{Display:Inline-block;Overflow:Hidden;width:100%;Height:0;content:"';vertical-align:Top;}. Demo a{width:20%;Display:Inline-block;Height:44px;Line-height:44px;text-align:Center;Border:1px solid #428cc8;Color:#666;font-size:16px;Margin-bottom:5px;Border-radius:3px;Background-color:#fefefe;Background-image:-webkit-gradient (linear,left top,left bottom,color-stop (0, #fefefe), Color-stop (1, #eee));Color:#666;text-decoration:None;}

Because text-align-last:justify temporarily only support IE, so in Google and other browsers in the last line will not justify, so we use after to create a pseudo-class, as the last line, set the height equals 0, the last line has become the penultimate line , so Google and other browsers in the wood text-align-last:justify can also.

For text-dynamically acquired elements, you can use the function

functionJustify_let (obj) {varobj=$ (obj); varlengths=[]; Obj.each (function() {Lengths.push ($ ( This). Text (). length);    }); //var smax=math.max (lengths);    if(lengths.length==0) {return;}  for(vari=0,smax=lengths[0],len=lengths.length;i<len;i++){        if(lengths[i]>Smax) {Smax=Lengths[i]; }    }     for(vari=0,len=lengths.length;i<len;i++){        varcurrlen=Lengths[i]; if(Currlen==smax) {Continue;} Obj.eq (i). css ({"Letter-spacing": ((Smax-currlen)/(currlen-1) + "Em"}); }

<Pclass= "T1">Name</P><Pclass= "T1">Gender</P><Pclass= "T1">Hobbies and Interests</P><Pclass= "T1">Motto</P><Scripttype= "Text/javascript">//<! [Cdata[Justify_let (". T1")//]]></script>

Method 2: Use Justify-content:space-between;

Box-pack is CSS3 's new book habits, relying on display:box, search box-orient influence, box-pack determine the sub-label level on its way, can choose start| End | center| Justify

<Divclass= "Demo">    <aclass= "link"href= "#none">10 USD</a>    <aclass= "link"href= "#none">20 USD</a>    <aclass= "link"href= "#none">30 USD</a>    <aclass= "link"href= "#none">50 USD</a></Div>

*{margin:0;padding:0;}/*Description: After Display:box defines the layout as a box model, you can use the Box-pack:justify property under the box model*/. Demo{Display:-webkit-box;Display:-webkit-flex;Display:-ms-flexbox;Display:Flex;-webkit-box-pack:Justify;-webkit-justify-content:Space-between;-ms-flex-pack:Justify;justify-content:Space-between;}. Demo a{width:20%;Display:Block;Height:44px;Line-height:44px;text-align:Center;Border:1px solid #428cc8;Color:#666;font-size:16px;Margin-bottom:5px;Border-radius:3px;Background-color:#fefefe;Background-image:-webkit-gradient (linear,left top,left bottom,color-stop (0, #fefefe), Color-stop (1, #eee));Color:#666;text-decoration:None;}

Method 3: Use column:

<Divclass= "Demo">    <aclass= "link"href= "#none">10 USD</a>    <aclass= "link"href= "#none">20 USD</a>    <aclass= "link"href= "#none">30 USD</a>    <aclass= "link"href= "#none">50 USD</a></Div>

*{margin:0;padding:0;}/*Description: 1.column-count defines the number of columns for an object, with 4 modules defined as 4 columns 2.column-gap defines the spacing of columns and columns in the object, the spacing cannot be set to a percentage and is not flexible enough*/. Demo{-webkit-column-count:4;-moz-column-count:4;Column-count:4;-webkit-column-gap:20px;-moz-column-gap:20px;Column-gap:20px; }. Demo a{Display:Block;Height:44px;Line-height:44px;text-align:Center;Border:1px solid #428cc8;Color:#666;font-size:16px;Margin-bottom:5px;Border-radius:3px;Background-color:#fefefe;Background-image:-webkit-gradient (linear,left top,left bottom,color-stop (0, #fefefe), Color-stop (1, #eee));Color:#666;text-decoration:None;}

Reference: http://www.cnblogs.com/PeunZhang/p/3289493.html

Reference: http://blog.csdn.net/nieshanfeng1/article/details/19193323

CSS Absolute Alignment