CSS3 column-count ÊôÐÔ

ʵÀý

½« div ÔªËØÖеÄÎı¾·ÖΪÈýÁУº

div
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari ºÍ Chrome */
column-count:3;
}

Ç××ÔÊÔÒ»ÊÔ

Ò³Ãæµ×²¿Óиü¶àʵÀý¡£

ä¯ÀÀÆ÷Ö§³Ö

IE Firefox Chrome Safari Opera

Internet Explorer 10 ºÍ Opera Ö§³Ö column-count ÊôÐÔ¡£

Firefox Ö§³ÖÌæ´úµÄ -moz-column-count ÊôÐÔ¡£

Safari ºÍ Chrome Ö§³ÖÌæ´úµÄ -webkit-column-count ÊôÐÔ¡£

×¢ÊÍ£ºInternet Explorer 9 ÒÔ¼°¸üÔç°æ±¾µÄä¯ÀÀÆ÷²»Ö§³Ö column-count ÊôÐÔ¡£

¶¨ÒåºÍÓ÷¨

column-count ÊôÐÔ¹æ¶¨ÔªËØÓ¦¸Ã±»»®·ÖµÄÁÐÊý¡£

ĬÈÏÖµ£º auto
¼Ì³ÐÐÔ£º no
°æ±¾£º CSS3
JavaScript Óï·¨£º object.style.columnCount=3

Óï·¨

column-count: number|auto;
Öµ ÃèÊö ²âÊÔ
number ÔªËØÄÚÈݽ«±»»®·ÖµÄ×î¼ÑÁÐÊý¡£ ²âÊÔ
auto ÓÉÆäËûÊôÐÔ¾ö¶¨ÁÐÊý£¬±ÈÈç "column-width"¡£ ²âÊÔ

Ç××ÔÊÔÒ»ÊÔ - ʵÀý

Column-gap
½« div ÔªËØÖеÄÎı¾·ÖΪÈýÁУ¬²¢¹æ¶¨Áмä 30 ÏñËØµÄ¼ä¸ô¡£
Column-rule
¹æ¶¨ÁÐÖ®¼äµÄ¿í¶È¡¢ÑùʽºÍÑÕÉ«¡£

Ïà¹ØÒ³Ãæ

CSS3 ½Ì³Ì£ºCSS3 ¶àÁÐ

VUE