本文探讨了前端面试中常见的三栏布局问题，分析了包括float、绝对定位、flex、表格和网格在内的五种布局解决方案。针对每种方法，文章详细阐述了其优缺点，如浮动布局的高度塌陷问题、绝对定位的可适用性差、flex布局的兼容性挑战、表格布局的复杂性和网格布局的兼容性限制。同时，提到了高度未知时的布局选择及兼容性问题。
题目：假设高度已知，请写出三栏布局，其中左栏、右栏宽度各为300px，中间自适应
1. 五种解决方案
- float 布局
- 绝对定位
- flex 布局
- 表格布局
- 网格布局
延伸：1. 五种解决方案的优缺点； 2. 若高度未知，哪种方案最合适； 3. 兼容性问题
flex和表格布局会自动撑开高度
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Layout</title>
<style media="screen">
html *{
padding: 0;
margin: 0;
}
.layout article div{
min-height: 100px;
}
</style>
</head>
<body>
<!--浮动布局 -->
<section class="layout float">
<style media="screen">
.layout.float .left{
float:left;
width:300px;
background: red;
}
.layout.float .center{
background: yellow;
}
.layout.float .right{
float:right;
width:300px;
background: blue;
}
</style>
<h1>三栏布局</h1>
<article class="left-right-center">
<div class="left"></div>
<div class="right"></div>
<div class="center">
最低0.47元/天 解锁文章
758
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
