标签：

一、问题场景

传统使用width属性配合float总是最右边出现间隙，需要实现任意个DIV的完美等分，包括横向和纵向

二、实现

父元素样式

/*盒模型*/ display: -webkit-box; display: -moz-box; display: box; /*横向or纵向*/ -webkit-box-orient: horizontal; /* 垂直是vertical */ -moz-box-orient: horizontal; /* 垂直是vertical */ box-orient: horizontal;

子元素样式

-webkit-box-flex: 1; -moz-box-flex: 1; box-flex: 1; 三、完整代码 <template> <div> <div>1</div> <div>2</div> <div>3</div> </div> </template> <script> import serialport from ‘serialport‘ export default { name: "MainPage", data: function () { return { serialPortList: [] } }, methods: { handleScanSerialPortList: function () { serialport.list().then( ports => { console.log(ports) } ) } } } </script> <style scoped> .main-box { /*盒模型*/ display: -webkit-box; display: -moz-box; display: box; /*横向or纵向*/ -webkit-box-orient: horizontal; -moz-box-orient: horizontal; box-orient: horizontal; } .main-box-content { -webkit-box-flex: 1; -moz-box-flex: 1; box-flex: 1; } </style>

DIV完美等分的CSS样式实现

，