css如何实现均分布局
导读：本文共1047.5字符，通常情况下阅读需要3分钟。同时您也可以点击右侧朗读，来听本文内容。按键盘←（左） →（右） 方向键可以翻页。
摘要： 均分布局经典的均分布局由多列组成，其特点为每列宽度相等和每列高度固定且相等。总体来说也是最简单的经典布局，由于每列宽度相等，所以很易找到合适的方式处理。<divclass="average-layout"><divclass="one"></div><divclass=&quo... ...
音频解说
目录
(为您整理了一些要点),点击可以直达。经典的均分布局由多列组成，其特点为每列宽度相等和每列高度固定且相等。总体来说也是最简单的经典布局，由于每列宽度相等，所以很易找到合适的方式处理。
<divclass="average-layout"><divclass="one"></div><divclass="two"></div><divclass="three"></div><divclass="four"></div></div>
.one{background-color:#f66;}.two{background-color:#66f;}.three{background-color:#f90;}.four{background-color:#09f;}float + width
每列宽度声明为相等的百分比，若有4列则声明width:25%。N列就用公式100 / n求出最终百分比宽度，记得保留2位小数，懒人还可用width:calc(100% / n)自动计算呢。
.average-layout{width:400px;height:400px;div{float:left;width:25%;height:100%;}}flex
使用flex实现会更简洁。节点声明display:flex后，生成的FFC容器里所有子节点的高度都相等，因为容器的align-items默认为stretch，所有子节点将占满整个容器的高度。每列声明flex:1自适应宽度。
.average-layout{display:flex;width:400px;height:400px;div{flex:1;}} </div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">本文：
css如何实现均分布局的详细内容，希望对您有所帮助，信息来源于网络。