Shulou(Shulou.com)06/02 Report--

This "how to use css to achieve end alignment" article, the article sample code is introduced in great detail, with a certain reference value, interested friends must refer to, for "how to use css to achieve end alignment", Xiaobian sorted out the following knowledge points, please follow the pace of the editor step by step slowly understand, then let us enter the topic.

To achieve css alignment, you can select column. Column is an attribute of css3 and is a multi-column layout. It is simple and practical to use column to achieve end-to-end alignment. It is necessary to set the number of modules to be the same as the number of columns in column. First, look at its three attributes:

The 1.column-count attribute specifies the number of columns that the element should be separated from

The 2.column-gap attribute specifies the interval between columns

The 2.column-rule property sets the width, style, and color rules between columns.

Compatibility of CSS3 multi-column attributes: Internet Explorer 10 and Opera support multi-column attributes, Firefox requires prefixes-moz-,Chrome and Safari require prefixes-webkit-, special note: Internet Explorer 9 and earlier versions do not support multi-column attributes.

Example of css alignment: use column-count to define the number of columns of an object. If there are 4 p (that is, 4 modules) in the example, then define it as 4 columns, and then use column-gap to define the distance between columns in the object. The spacing cannot be set to a percentage, but you can only use px. See the following code for details:

Align the two ends of the css

* {margin:0;padding:0;}

.box {

Margin:100px 0

-webkit-column-count:4;-moz-column-count:4;column-count:4

-webkit-column-gap:30px;-moz-column-gap:30px;column-gap:30px

}

.box p {

Height:30px

Line-height:30px

Text-align:center

Border:1px solid red

Color:#000

Font-size:12px

}

Column 1

Column 2

Column 3

Column 4

What are the selectors of css? css selectors can be divided into three categories, namely, id selector, class selector and tag selector. There can be many combinations between them, such as descendant selector, sub-selector, pseudo-class selector, general selector, group selector, and so on.

The above is all the content of the article "how to use css to align both ends". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.