CSS實現(xiàn)寬度自動等分,即將一個父元素中的若干個子元素等分排列,是實現(xiàn)頁面布局中常用的技巧。以下是一些常用的實現(xiàn)方法:
/* 1. 使用Flexbox布局 */ .parent-element { display: flex; justify-content: space-between; /* 采用平均分布方式 */ } .child-element { width: calc(100% / 3); /* 假設(shè)有3個子元素 */ } /* 2. 使用Grid布局 */ .parent-element { display: grid; grid-template-columns: repeat(3, 1fr); /* 假設(shè)有3個子元素 */ grid-gap: 10px; /* 可選間隔 */ } .child-element { width: 100%; } /* 3. 使用浮動方式 */ .parent-element { overflow: hidden; /* 清除浮動問題 */ } .child-element { width: calc(33.33% - 10px); /* 假設(shè)有3個子元素,可選間隔10px */ float: left; margin-right: 10px; /* 可選間隔 */ } .child-element:last-child { margin-right: 0; /* 清除最后一個子元素的間隔 */ }
以上三種方法均可實現(xiàn)寬度自動等分,具體選擇哪種方法可以根據(jù)實際需求和瀏覽器兼容性來決定。