Alignment at both ends and alignment at both ends of css

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.