CSS四等分是指將一個元素水平方向平均地分成四份,可以用于制作復雜的布局效果。下面是一些實現方法。
/* 方法一:使用flex布局 */ .container { display: flex; } .container >div { flex: 1; } /* 方法二:使用浮動 */ .container { overflow: hidden; } .container >div { float: left; width: 25%; } /* 方法三:使用inline-block */ .container { font-size: 0; /* 解決間隔問題 */ letter-spacing: -0.31em; /* 解決間隔問題 */ word-spacing: -0.12em; /* 解決間隔問題 */ text-align: justify; /* 最后一行對齊 */ } .container >div { display: inline-block; width: 25%; font-size: 16px; /* 恢復字體大小 */ letter-spacing: 0; /* 恢復間隔 */ word-spacing: 0; /* 恢復間隔 */ vertical-align: top; /* 讓子元素垂直對齊 */ } /* 方法四:使用calc */ .container >div { width: calc(100% / 4); }
以上是四種實現CSS四等分的方法,不同的方法有不同的適用場景,需要根據實際情況選擇。希望對大家有所幫助。