题目1:假设高度已知，请写出三栏布局，其中左栏、右栏宽度各为300px,中间自适应
答案:
①、浮动方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style media=‘screen‘>
*{
padding:0;
margin:0;
}
.layout article div{
min-height:100px;
}
.layout.float .left{
float:left;
width:300px;
background:red;
}
.layout.float .right{
float:right;
width:300px;
background:blue;
}
.layout.float .center{
background:yellow;
}
</style>
</head>
<body>
<section class="layout float">
<article class=‘left-right-center‘>
<div class=‘left‘></div>
<div class=‘right‘></div>
<div class=‘center‘>
<h1>浮动解决方案</h1>
</div>
</article>
</section>
</body>
</html>
②、定位方式
<style media=‘screen‘>
*{
padding:0;
margin:0;
}
.layout article div{
min-height:100px;
position:absolute;
}
.layout.float .left{
left:0;
width:300px;
background:red;
}
.layout.float .right{
right:0;
width:300px;
background:blue;
}
.layout.float .center{
left:300px;
right:300px;
background:yellow;
}
</style>
③、flex布局
*{
padding:0;
margin:0;
}
.layout article{
display:flex;
}
.layout.float .left{
width:300px;
background:red;
}
.layout.float .right{
width:300px;
background:blue;
}
.layout.float .center{
flex:1;
background:yellow;
}
④、表格布局
*{
padding:0;
margin:0;
}
.layout article{
width:100%;
display:table;
height:100px;
}
.layout article div{
display:table-cell;
}
.layout.float .left{
width:300px;
background:red;
}
.layout.float .right{
width:300px;
background:blue;
}
.layout.float .center{
background:yellow;
}
⑤、网格布局
*{
padding:0;
margin:0;
}
.layout article{
display:grid;
width:100%;
grid-template-rows:100px;
grid-template-columns:300px auto 300px;
}
article .left{
background:red;
}
article .center{
background:yellow;
}
article .left{
background:blue;
}
问题扩展：
1、几种方法的优缺点
浮动：需要清除浮动，但兼容性较好
定位:脱离文档流，导致下面的内容都要脱离文档流，但是比较快捷
flex:可以解决上面两个的问题，但是存在兼容性
表格:表格布局的兼容性非常好，有一些历史性的问题
网格：比较新的方式
2、去掉高度已知，那种方式不起作用?
除了flex和表格布局可以之外，其余的都不起作用。
时间： 2024-10-11 23:31:18