Alignment at both ends and alignment at both ends of css
Method 1: Use text-align: justify
Text-align: The justify attribute is fully compatible. To use it to achieve the alignment between the two ends, you must note that adding [Spaces/linefeeds/tabs] between modules can take effect. Similarly, to achieve text alignment, you must add [spaces, linefeeds, and tabs] between words.
/*
Note:
1. in IE, the private attribute text-align-last: justify must be used in combination to align individual lines in a block. To make text-align-last take effect, you must first define text-align as justify.
2. line-height: 0 solves unnecessary gaps at the bottom of the standard browser container
*/
. Content {
Text-align: justify;
Text-align-last: justify;
Line-height: 0;
Height: 44px;
}
/*
Note:
When the module uses a [Line Break] or a [space character], the webkit browser will cause unnecessary white space in the last module. Use font-size: 0 to clear the space.
*/
@ Media all and (-webkit-min-device-pixel-ratio: 0 ){
. Content {
Font-size: 0;
}
}
/*
Note:
1. text-align-last: justify is currently only supported by IE. standard browsers need to use. demo: after pseudo-class to simulate similar effects.
2. In operabrowser, vertical-align: top must be added to completely eliminate unnecessary spaces at the bottom.
*/
. Content: after {
Display: inline-block;
Overflow: hidden;
Width: 100%;
Height: 0;
Content :'';
Vertical-align: top;
}
The subclass must be an inline-block element.
**************************************** ****************************************
Method 2: Use box-pack: justify
Parent class container css:
. Content {
Display:-webkit-box;
Display:-webkit-flex;
Display:-ms-flexbox;
Display: flex;
-Webkit-box-pack: justify;
-Webkit-justify-content: space-;
-Ms-flex-pack: justify;
Justify-content: space-;
}
The subclass must be a block element.
**************************************** ****************************************
Method 3: Use column (Multi-column layout)
/*
Note:
1. column-count defines the number of columns of an object.
2. column-gap defines the spacing between columns and columns in the object.
*/
Parent class container css:
. Content {
-Webkit-column-count: 2;
-Moz-column-count: 4;
Column-count: 4;
-Webkit-column-gap: 20px;
-Moz-column-gap: 20px;
Column-gap: 20px;
}
The subclass must be a block element.