1. Leverage Flex
Parentelement{display:flex;justify-content:space-between;}
Align left aligned to right
< div class = "Justifyspan" > < span > align </ span > < span > align </ span > </ div >
{ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; }
2. text-align:justify;
parentelement {text-align:justify;}
Parentelement:after{content: ""; display:inline-block;width:100%;} The main is to width:100%. Display:inline-block
childelement {display:inline-block;} or span e a This inline, inline-block tag
Qi Qi
<div class= "Justifyspan" > <span> </span> <span> qi </span> </div>
. Justifyspan{text-align:Justify;text-justify:Distribute-all-lines;/*ie6-8*/Text-align-last:Justify;/*IE9*/-moz-text-align-last:Justify;/*FF*/-webkit-text-align-last:Justify;/*Chrome 20+*/}. Justifyspan:after{content:"";Display:Inline-block;width:100%;Overflow:Hidden;Height:0; }
2.2
Align left aligned to right
<class= "Justifyspan"> <Div> Align Left </div> <Div> Right </ Div > </ Div >
. Justifyspan{text-align:Justify;text-justify:Distribute-all-lines;/*ie6-8*/Text-align-last:Justify;/*IE9*/-moz-text-align-last:Justify;/*FF*/-webkit-text-align-last:Justify;/*Chrome 20+*/}. Justifyspan:after{content:"";Display:Inline-block;width:100%;Overflow:Hidden;Height:0; }. Justifyspan Div{Display:Inline-block; }
3.float:right;float:left;
Two-terminal align