column-span
åºçº¿
广æ³å¯ç¨
èª 2020å¹´7æ èµ·ï¼æ¤ç¹æ§å·²å¨ä¸»æµæµè§å¨ä¸å¾å°æ¯æï¼å¯å¨å¤§å¤æ°è®¾å¤åæµè§å¨çæ¬ä¸æ£å¸¸ä½¿ç¨ã
CSS 屿§ column-span çå¼è¢«è®¾ç½®ä¸º all æ¶ï¼å¯ä»¥è®©ä¸ä¸ªå
ç´ è·¨è¶ææçåã
å°è¯ä¸ä¸
column-span: none;
column-span: all;
<section id="default-example">
<div class="multicol-element">
<p>
London. Michaelmas term lately over, and the Lord Chancellor sitting in
Lincoln's Inn Hall.
</p>
<div id="example-element">Spanner?</div>
<p>
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>
</div>
</section>
.multicol-element {
width: 100%;
text-align: left;
column-count: 3;
}
.multicol-element p {
margin: 0;
}
#example-element {
background-color: rebeccapurple;
padding: 10px;
color: #fff;
}
css
/* å
³é®åå¼ */
column-span: none;
column-span: all;
/* å
¨å±å¼ */
column-span: inherit;
column-span: initial;
column-span: revert;
column-span: revert-layer;
column-span: unset;
ä¸ä¸ªè·¨è¶å¤åçå ç´ è¢«ç§°ä¸ºè·¨è¶å ç´ ï¼spanning elementï¼ã
è¯æ³
column-span 屿§å¯ä»¥è¢«æå®ä¸ºä¸é¢ååºçå
³é®åå¼ä¹ä¸ã
åå¼
å½¢å¼å®ä¹
| åå§å¼ | none |
|---|---|
| éç¨å ç´ | in-flow block-level elements |
| æ¯å¦æ¯ç»§æ¿å±æ§ | å¦ |
| 计ç®å¼ | as specified |
| å¨ç»ç±»å | 离æ£å¼ |
å½¢å¼è¯æ³
column-span =
none |
<integer [1,â]> |
all |
auto
<integer> =
<number-token>
示ä¾
>使æ é¢è·¨è¶å
å¨è¯¥ç¤ºä¾ä¸ï¼æ é¢è·¨è¶äºæç« ä¸çææåã
HTML
html
<article>
<h2>è¿æ¯ä¸ä¸ªè·¨è¶äºææçåçæ é¢</h2>
<p>h2 å
ç´ åºè¯¥è·¨è¶ææåãææ¬çå
¶ä½å
容åºè¯¥åå¸å¨ååä¸ã</p>
<p>è¿æ¯ä¸äºä½¿ç¨ CSS `columns` 屿§åæä¸åçææ¬ãææ¬å¨ååä¸åååå¸ã</p>
<p>è¿æ¯ä¸äºä½¿ç¨ CSS `columns` 屿§åæä¸åçææ¬ãææ¬å¨ååä¸åååå¸ã</p>
<p>è¿æ¯ä¸äºä½¿ç¨ CSS `columns` 屿§åæä¸åçææ¬ãææ¬å¨ååä¸åååå¸ã</p>
<p>è¿æ¯ä¸äºä½¿ç¨ CSS `columns` 屿§åæä¸åçææ¬ãææ¬å¨ååä¸åååå¸ã</p>
</article>
CSS
css
article {
columns: 3;
}
h2 {
column-span: all;
}
ç»æ
è§è
| è§è |
|---|
| CSS Multi-column Layout Module Level 1> # column-span> |