About properties related to multi-column layout columns in CSS3

Source: Internet
Author: User
Tags dashed line

Added properties that enable multi-column layouts in CSS3

The implementation before this is cumbersome and may require a variety of positioning
Now all we need is an attribute to implement
Multi-column layouts are similar to our newspaper layouts
This makes it easy for readers to watch

Multi-column quantity and multi-column width

If a line of text is too long, we may not have the desire to read it like this

<p class= "Demo" >......</p>
. demo {    width:600px;    height:200px;    BORDER:1PX solid black;}

Multi-Column Quantity column-count You can specify the number of columns you want
The browser will set the appropriate column widths for you

. demo {    width:600px;    height:200px;    border:1px solid black;    Column-count:3; /* Increment */}

You can also use Column-width to set column widths without specifying the number of columns
And the code above is equivalent.

. demo {    width:600px;    height:200px;    border:1px solid black;    Column-width:11em; /* Change */}

If you set the width value not enough to fill the entire element
Then the browser will try to use the maximum width to guarantee the number of columns to fill the entire element
For example, the above 11em changed to 10em, the browser will also display 3 columns layout

Shorthand for multiple-column syntax

Column-count and Column-width can synthesize a composite property columns
You can use this property to set the column width, number of columns, or both
However, when used in general, setting one of these properties will meet our needs.

. demo {    width:600px;    height:200px;    border:1px solid black;    Columns:3;    /* or columns:11em;*//    * or Columns:11em 3;*/}

Column interval width

This interval exists between multiple column layout columns and columns
The default interval is 1em
We can control the column interval through the Column-gap property

. demo {    width:600px;    height:200px;    border:1px solid black;    Columns:3;    Column-gap:2em; /* Increment */}

Note that if your column interval is set too large, the text will overflow
So you should be able to match the appropriate number of columns to control

Elements across columns

I add a caption element to the text and change the height

<p class= "Demo" >
. demo {    width:600px;    height:280px;/* Change * * *    border:1px solid black;    Columns:3;}


By default, the H1 element only occupies the first column
What if I want to put him on top of more than one column?

Setting styles on H1 elements

h1 {    column-span:all; <--    Text-align:center;}

Column-span can specify the number of columns that the element spans the default property value is 1
Set to all to allow elements to span all columns

Column interval style

If you think the column and column are just spaces spaced too boring
We can set the "rule" by column-rule the heap column interval
This property is a composite property with the following sub-properties

    • Column-rule-width

    • Column-rule-style

    • Column-rule-color

Sort of like we set the border property

. demo {    width:600px;    height:200px;    border:1px solid black;    Columns:3;    COLUMN-RULE:1PX solid black;}

In this way, a solid black line of 1 pixels wide is used between columns and columns.

Colum-rule-width In addition to the ability to set pixels,
There are also three keywords thin, medium, thick set three widths
The Column-rule-style property value has the following keywords

    • None None

    • Hidden hidden

    • Dotted dot-like

    • Dashed dashed line

    • Solid Solid Line

    • Double Two-wire

    • Groove Definition 3D Grooved rules

    • Ridge defining 3D ridged rules

    • Inset defining 3D inset rules

    • Outset defining 3D outset rules

The effect of the latter four depends on the width and color values, first look

CSS3 multiple-column layouts with less
But the basic attributes, we still need to know.

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.