Alignment at both ends and alignment at both ends of css

Source: Internet
Author: User

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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.