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

This article mainly explains the "CSS web page text column how to achieve", the article explains the content is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "CSS web page text column how to achieve" it!

In some websites with more text content, the display mode of multi-column layout is usually adopted. There are two ways to realize the effect of multi-column layout in DW, namely, floating layout and positioning layout, but because the floating layout is too flexible and easy to be misplaced, the new column attribute is mostly used in CSS3.0 to set the page structure to realize multi-column layout of web pages.

Column-width property: defines the width of each column in a multi-column layout, which can be used separately or in combination with other multi-column layout properties.

Column-count property: sets the number of columns for a multi-column layout without automatically adjusting the number of columns through column width

Column-gap property: sets the spacing between columns to better control the content and layout in a multi-column layout

Column-rule attribute: add column Lin

Here's another tip.

Using the font-face attribute, you can load the font file on the server side and let the client display fonts that are not installed by the client.

Font-face

Font-family: the name of the setting text

Font-style: styling text

Font-variant: sets the case of text

Font-weight: sets the thickness of the text

Font-stretch: sets whether the text is stretched horizontally

Font-size: setting text font size

Src: setting path

The code is as follows

# main {width: 750px; height: 362px; background-color: # 4F5422; padding-left: 11px; padding-right: 10px; float: left;-moz-column-count: 3;-moz-column-gap: 25px;}

The effect is as follows

Thank you for your reading, the above is the "CSS page text column how to achieve" the content, after the study of this article, I believe you on the CSS page text column how to achieve this problem has a deeper understanding, the specific use of the need for you to practice and verify. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.