CSS中實現(xiàn)平均分配元素的方法很多,以下介紹其中幾種:
/* 方法一:使用flex布局 */ .container { display: flex; /* 將容器設(shè)置為flex布局 */ justify-content: space-between; /* 使子元素平均分配空間 */ } /* 方法二:使用grid布局 */ .container { display: grid; /* 將容器設(shè)置為grid布局 */ grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* 自動分配列數(shù),每列最小寬度100px */ } /* 方法三:使用calc()函數(shù) */ .item { width: calc(100% / 3); /* 將元素寬度設(shè)置為屏幕寬度除以元素個數(shù) */ box-sizing: border-box; /* 讓元素寬度包含padding和border */ float: left; /* 將元素設(shè)置為浮動,使其排列在同一行 */ } .clearfix::after { content: ""; /* 清除浮動 */ display: block; clear: both; }
以上是常用的3種方法,可以根據(jù)實際需求靈活選擇。同時,需要注意的是,使用一些不支持flex和grid布局的瀏覽器時,建議使用下面方法二或方法三。