CSS div布局 常见问题1 换行
发布网友
发布时间：2024-09-29 05:26
共1个回答
热心网友
时间：2024-11-04 07:39
原计划目标：外部div1宽度300px；内部3个子div：通过float:left设置成3列；每个宽度100px。
实际结果：代码下拉查看答案。
分析：盒子模型的box-sizing属性的默认值：content-box，表示width是内容宽度，而不是总宽度。3个子div的完整宽度：内容宽度100px+左右边框宽度2px=102px。而外层div的内容宽度：300px，只够放两个子div。即：元素总宽度计算问题引起的换行。
解决方法1：将外层div的宽度改为306px。刚好容纳。F12查看盒子模型。这个解决方法的缺点：还要算宽高，而且算出来是零碎值，累。
解决方法2：将所有元素的box-sizing改整成border-box，表示width是总宽度。F12查看盒子模型。
