css-常用布局-基础的五种

三栏布局：

如果不考虑高度，即用内容填充高度的话，是可以用inline-block和calc（）实现布局的。但适用性差。
float和position的兼容性好，但float会用到calc属性影响兼容性。
calc和flex的兼容性都有一定问题。
grid是未来的发展趋势~~所以兼容性拉跨也很合理吧，哈哈~~

body

 <body>
    <div class="out">
        <div class="item left"></div>
        <div class="item mid"></div>
        <div class="item right"></div>
    </div>
</body>

float实现

点我查看代码

         .item{
            float: left;
            height: 400px;
        }
        .left,.right{
            width: 200px;
            background-color: antiquewhite;
        }
        .mid{
            width: calc(100% - 400px);
            background-color: aqua;
        }

重点：使用了calc计算了中间宽度

absolute实现

点击查看代码

         .out{
            position: relative;
        }
        .item{
            top:0;
            position: absolute;
            height: 400px;
        }
        .left{
            background-color:antiquewhite;
            width: 200px;
            left: 0;
        }
        .right{
            background-color: antiquewhite;
            width: 200px;
            right: 0;
        }
        .mid{
            width: calc(100% - 400px);
            left: 200px;
            background-color: aqua;
        }

重点：同样可使用calc计算宽度，但也可以通过ps的方法达到更好的兼容性
ps. mid也可以通过left：200px；right：200px实现

flex实现

点击查看代码

         .out{
            display: flex;
            height: 400px;
        }
        .left,.right{
            width: 200px;
            background-color: antiquewhite;
        }
        .mid{
            flex:auto;
            background-color: aqua;
        }

用flex:auto实现自适应

table实现

点击查看代码

         .out{
            display: table;
            height: 400px;
            width: 100%;
        }
        .item{
            display:table-cell;
        }
        .left,.right{
            width: 200px;
            background-color: antiquewhite;
        }
        .mid{
            width: calc(100% - 400px);
            background-color: aqua;
        }

用calc实现自适应

grid布局

点击查看代码

         .out{
            display: grid;
            grid-template-rows: 400px;
            grid-template-columns: 200px auto 200px;
        }
        .left,.right{
            background-color: antiquewhite;
        }
        .mid{
            background-color: aqua;
        }

用grid-template-rows的auto属性实现自适应

参考

前端面试布局相关汇总--三栏布局·圣杯布局·双飞翼布局·瀑布流布局

posted @ 2022-10-24 19:22 badpear 阅读(71) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· css-常用布局-圣杯&双飞翼

· css-垂直居中

· 实现三栏布局的8种方式

· position、float、flex三种方式实现三栏布局

· css三栏布局

阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构

公告

昵称： badpear
园龄： 2年11个月
粉丝： 0
关注： 1

+加关注

2025年3月

日

一

二

三

四

五

六

badpear

css-常用布局-基础的五种

三栏布局：

float实现

absolute实现

flex实现

table实现

grid布局

参考

公告

搜索

常用链接

随笔分类

随笔档案

阅读排行榜

	<body>
	<div class="out">
	<div class="item left"></div>
	<div class="item mid"></div>
	<div class="item right"></div>
	</div>
	</body>

	.item{
	float: left;
	height: 400px;
	}
	.left,.right{
	width: 200px;
	background-color: antiquewhite;
	}
	.mid{
	width: calc(100% - 400px);
	background-color: aqua;
	}

	.out{
	position: relative;
	}
	.item{
	top:0;
	position: absolute;
	height: 400px;
	}
	.left{
	background-color:antiquewhite;
	width: 200px;
	left: 0;
	}
	.right{
	background-color: antiquewhite;
	width: 200px;
	right: 0;
	}
	.mid{
	width: calc(100% - 400px);
	left: 200px;
	background-color: aqua;
	}

	.out{
	display: flex;
	height: 400px;
	}
	.left,.right{
	width: 200px;
	background-color: antiquewhite;
	}
	.mid{
	flex:auto;
	background-color: aqua;
	}

	.out{
	display: table;
	height: 400px;
	width: 100%;
	}
	.item{
	display:table-cell;
	}
	.left,.right{
	width: 200px;
	background-color: antiquewhite;
	}
	.mid{
	width: calc(100% - 400px);
	background-color: aqua;
	}

	.out{
	display: grid;
	grid-template-rows: 400px;
	grid-template-columns: 200px auto 200px;
	}
	.left,.right{
	background-color: antiquewhite;
	}
	.mid{
	background-color: aqua;
	}