类别:htmlcss / 日期:2022-10-30 / 浏览:305 / 评论:0
三列布局又分为两种,两列定宽一列自适应,以及两侧定宽中间自适应
两列定宽一列自适应:
1、使用 float+margin:
给 div 设置 float:left,left 的 div 添加属性 margin-right:left 和 center 的间隔 px,right 的div 添加属性 margin-left:left 和 center 的宽度之和加上间隔
2、使用 float+overflow:
给 div 设置 float:left,再给 right 的 div 设置 overflow:hidden。这样子两个盒子浮动,另一个盒子触发 bfc 达到自适应
3、使用 position:
父级 div 设置 position:relative,三个子级 div 设置 position:absolute,这个要计算好盒子的宽度和间隔去设置位置,兼容性比较好,
4、使用 table 实现:
父级 div 设置 display:table,设置 border-spacing:10px//设置间距,取值随意,子级 div设置 display:table-cell,这种方法兼容性好,适用于高度宽度未知的情况,但是 margin失效,设计间隔比较麻烦,
5、flex 实现:
parent 的 div 设置 display:flex;left 和 center 的 div 设置 margin-right;然后 right 的 div设置 flex:1;这样子 right 自适应,但是 flex 的兼容性不好
6、grid 实现:
parent 的 div 设置 display:grid,设置 grid-template-columns 属性,固定第一列第二列宽度,第三列 auto,对于两侧定宽中间自适应的布局,对于这种布局需要把 center 放在前面,可以采用双飞翼布局:圣杯布局,来实现,也可以使用上述方法中的 grid,table,flex,position 实现
版权声明 : 本文未使用任何知识共享协议授权,您可以任何形式自由转载或使用。
发表评论 / 取消回复