columns
åºçº¿
广æ³å¯ç¨
èª 2017å¹´3æ èµ·ï¼æ¤ç¹æ§å·²å¨ä¸»æµæµè§å¨ä¸å¾å°æ¯æï¼å¯å¨å¤§å¤æ°è®¾å¤åæµè§å¨çæ¬ä¸æ£å¸¸ä½¿ç¨ã
CSS 屿§ columns ç¨æ¥è®¾ç½®å
ç´ çå宽ååæ°ã
å°è¯ä¸ä¸
columns: 2;
columns: 6rem auto;
columns: 12em;
columns: 3;
<section id="default-example">
<p id="example-element">
London. Michaelmas term lately over, and the Lord Chancellor sitting in
Lincoln's Inn Hall. Implacable November weather. As much mud in the streets
as if the waters had but newly retired from the face of the earth, and it
would not be wonderful to meet a Megalosaurus, forty feet long or so,
waddling like an elephantine lizard up Holborn Hill.
</p>
</section>
#example-element {
min-width: 21rem;
text-align: left;
}
宿¯ä¸ä¸ªç®å屿§ï¼å¯å¨å个æ¹ä¾¿ç声æä¸è®¾ç½® column-width å column-count 屿§ã䏿æç®å屿§ä¸æ ·ï¼ä»»ä½çç¥çåå¼é½å°è®¾ç½®ä¸ºå
¶åå§å¼ã
è¯æ³
/* Column width */
columns: 18em;
/* Column count */
columns: auto;
columns: 2;
/* Both column width and count */
columns: 2 auto;
columns: auto 12em;
columns: auto auto;
/* Global values */
columns: inherit;
columns: initial;
columns: unset;
columns 屿§å¯ä»¥æä»»ä½é¡ºåºæå®ä¸ºä¸é¢ååºçä¸ä¸ªæä¸¤ä¸ªå¼ã
åå¼
<'column-width'>-
çæ³çå宽ï¼å®ä¹ä¸º
<length>æautoå ³é®åãå®é 宽度å¯ä»¥æ´å®½ææ´çªä»¥éåå¯ç¨ç©ºé´ãSeecolumn-widthã <'column-count'>-
å ç´ å 容åºåæççæ³åæ°ï¼å®ä¹ä¸º
<integer>æautoå ³é®åã妿æ¤å¼ååç宽度é½ä¸æ¯autoï¼åå®ä» æç¤ºå 许çæå¤§åæ°ã请åécolumn-countã
æ£å¼è¯æ³
columns =
[ <'column-width'> || <'column-count'> ] [ / <'column-height'> ]?
<column-width> =
auto |
<length [0,â]> |
min-content |
max-content |
fit-content( <length-percentage> )
<column-count> =
auto |
<integer [1,â]>
<column-height> =
auto |
<length [0,â]>
<length-percentage> =
<length> |
<percentage>
<integer> =
<number-token>
ä¾å
>HTML
<p class="content-box">
This is a bunch of text split into three columns using the CSS `columns`
property. The text is equally distributed over the columns.
</p>
CSS
.content-box {
columns: 3 auto;
}
Result
è§è
| è§è |
|---|
| CSS Multi-column Layout Module Level 2> # propdef-columns> |
| åå§å¼ | 该ç®åæå¯¹åºçæ¯ä¸ªå±æ§ï¼
|
|---|---|
| éç¨å ç´ | Block containers except table wrapper boxes |
| æ¯å¦æ¯ç»§æ¿å±æ§ | å¦ |
| 计ç®å¼ | 该ç®åæå¯¹åºçæ¯ä¸ªå±æ§ï¼
|
| å¨ç»ç±»å | 该ç®åæå¯¹åºçæ¯ä¸ªå±æ§ï¼
|