CSS3 column-gap ÊôÐÔ

ʵÀý

¹æ¶¨ÁмäµÄ¼ä¸ôΪ 40 ÏñËØ£º

div
{
-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari ºÍ Chrome */
column-gap:40px;
}

Ç××ÔÊÔÒ»ÊÔ

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

ä¯ÀÀÆ÷Ö§³Ö

IE Firefox Chrome Safari Opera

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

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

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

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

¶¨ÒåºÍÓ÷¨

column-gap ÊôÐԹ涨ÁÐÖ®¼äµÄ¼ä¸ô¡£

×¢ÊÍ£ºÈç¹ûÁÐÖ®¼äÉèÖÃÁË column-rule£¬Ëü»áÔÚ¼ä¸ôÖмäÏÔʾ¡£

ĬÈÏÖµ£º normal
¼Ì³ÐÐÔ£º no
°æ±¾£º CSS3
JavaScript Óï·¨£º object.style.columnGap="40px"

Óï·¨

column-gap: length|normal;
Öµ ÃèÊö ²âÊÔ
length °ÑÁмäµÄ¼ä¸ôÉèÖÃΪָ¶¨µÄ³¤¶È¡£ ²âÊÔ
normal ¹æ¶¨Áмä¼ä¸ôΪһ¸ö³£¹æµÄ¼ä¸ô¡£W3C ½¨ÒéµÄÖµÊÇ 1em¡£ ²âÊÔ

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

Column-count
°Ñ div ÔªËØÖеÄÎı¾»®·ÖΪÈýÁС£
Column-rule
¹æ¶¨ÁÐÖ®¼äµÄ¿í¶È¡¢ÑùʽºÍÑÕÉ«¡£

Ïà¹ØÒ³Ãæ

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

VUE