å¤åå¸å±çæ ·å¼
ç±äºå¨å¤åï¼multicolï¼å®¹å¨ä¸å建çåç忝å¿åçåï¼æä»¬å¯ä»¥å¯¹å ¶è¿è¡çæ ·å¼è®¾ç½®é常æéãç¶èï¼æä»¬è¿æ¯æä¸äºå¯ä»¥åçäºæ ãæ¬æåè§£éäºå¦ä½æ´æ¹åä¹é´çé´è·åæ ·å¼è§åã
为åçåè®¾ç½®æ ·å¼
é叏鿾ï¼ç®åæ æ³ä¸ºåçåè®¾ç½®æ ·å¼ãææä½ çåçåçå¿åçåæ æ³ä»¥ä»»ä½æ¹å¼å®ä½ï¼è¿æå³çæ æ³æ´æ¹çåçèæ¯é¢è²æä½¿ä¸ä¸ªå大äºå ¶ä»åãä¹è®¸å¨æªæ¥çè§èçæ¬ä¸å¯ä»¥å®ç°ãç¶èï¼ç®åæä»¬å¯ä»¥æ´æ¹åä¹é´çé´è·å¹¶å¨åä¹é´æ·»å 线æ¡ã
åé´è·
åä¹é´çé´è·ç± column-gap 屿§æ§å¶ãè¯¥å±æ§æåå¨å¤åå¸å±è§èä¸å®ä¹ãç¶èï¼ç°å¨å®å¨çå对é½ä¸å®ä¹ï¼ä»¥ä¾¿ç»ä¸å
¶ä»è§èï¼å¦ CSS ç½æ ¼å¸å±ï¼ä¸ççåé´è·ã
å¨å¤åä¸ï¼column-gap çåå§å¼ä¸º 1emãè¿æå³çä½ çåä¸ä¼ç¸äºæ¤åãå¨å
¶ä»å¸å±æ¹æ³ä¸ï¼column-gap çåå§å¼ä¸º 0ãå¦æä½¿ç¨å
³é®åå¼ "normal"ï¼é´è·å°è®¾ç½®ä¸º 1emã
ä½ å¯ä»¥éè¿å° column-gap çå¼è®¾ç½®ä¸ºä»»ä½é¿åº¦å使¥æ´æ¹é´è·ãå¨ä¸é¢ç示ä¾ä¸ï¼column-gap 设置为 40pxã
<div class="container">
<p>
Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
daikon amaranth tatsoi tomatillo melon azuki bean garlic.
</p>
<p>
Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
Dandelion cucumber earthnut pea peanut soko zucchini.
</p>
<p>
Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce
kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter
purslane kale. Celery potato scallion desert raisin horseradish spinach
carrot soko.
</p>
</div>
body {
font: 1.2em / 1.5 sans-serif;
}
.container {
column-count: 3;
column-gap: 40px;
}
column-gap å
许ç弿¯ <length-percentage>ï¼è¿æå³çå
许使ç¨ç¾åæ¯ãcolumn-gap çç¾åæ¯å¼æ¯æ ¹æ®å¤å容å¨å®½åº¦çç¾åæ¯è®¡ç®çã
åæ çº¿æ¡
该æ åå®ä¹äº column-rule-widthãcolumn-rule-style å column-rule-colorï¼å¹¶æä¾äºç®å column-ruleãè¿äºå±æ§ç工使¹å¼ä¸ border 屿§å®å
¨ç¸åï¼ä»»ä½ææç border-style é½å¯ä»¥ç¨ä½ column-rule-styleã
è¿äºå±æ§åºç¨äºå¤å容å¨å ç´ ï¼å æ¤ææåå°å ·æç¸åçåæ çº¿æ¡ãåæ çº¿æ¡ä» å¨åä¹é´ç»å¶ï¼èä¸å¨å¤é¨è¾¹ç¼ç»å¶ãåæ çº¿æ¡è¿åºä» å¨å ·æå 容çåä¹é´ç»å¶ã
卿¥ä¸æ¥ç示ä¾ä¸ï¼ä½¿ç¨é¿æ ¼å¼å¼å建äºä¸ä¸ªå®½åº¦ä¸º 5pxãé¢è²ä¸º rebeccapurple çç¹ç¶åæ 线æ¡ã
body {
font: 1.2em / 1.5 sans-serif;
}
.container {
column-count: 3;
column-rule-width: 5px;
column-rule-style: dotted;
column-rule-color: rebeccapurple;
}
请注æï¼åæ çº¿æ¡æ¬èº«ä¸å ç¨ä»»ä½ç©ºé´ï¼å®½åæ 线æ¡ä¸ä¼å°ååå¼ä»¥ä¸ºåæ 线æ¡è ¾åºç©ºé´ãç¸åï¼åæ 线æ¡è¦çäºé´éã
ä¸é¢ç示ä¾ä½¿ç¨äºé常宽ç 40px åæ çº¿æ¡å 10px é´è·ãåæ çº¿æ¡å¨åå 容ç䏿¹æ¾ç¤ºã为äºå¨åæ 线æ¡ä¸¤ä¾§è ¾åºç©ºé´ï¼é´è·éè¦å¢å å°å¤§äº 40pxã
body {
font: 1.2em / 1.5 sans-serif;
}
.container {
column-count: 3;
column-gap: 10px;
column-rule: 40px solid rebeccapurple;
}
ä¸ä¸æ¥
æ¬æè¯¦ç»ä»ç»äºç®åå¯ä»¥ä¸ºåçåè®¾ç½®æ ·å¼çæææ¹æ³ãå¨ä¸ä¸ç¯æåä¸ï¼æä»¬å°è®¨è®ºå¦ä½è®©å®¹å¨å çå ç´ è·¨è¶ææåã