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 ¶àÁÐ