一、分别尝试使用 float、position、flex 实现如下需求
1.实现一个两栏布局，左侧占百分之三十宽度，右侧占百分之七十宽度
DOM结构：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>try</title>
<link rel="stylesheet" href="try.css">
</head>
<body>
<div id="container">
<div id="left">left</div>
<div id="right">right</div>
</div>
</body>
</html>float样式:
body {
margin: 0;
}
#left {
float: left;
width: 30%;
height: 300px;
background-color: aqua;
}
#right {
float: left;
width: 70%;
height: 300px;
background-color: bisque;
}position样式:
body {
margin: 0;
}
#container {
position: relative;
}
#left {
position: absolute;
width: 30%;
height: 300px;
background-color: aqua;
}
#right {
position: absolute;
top: 0;
right: 0;
width: 70%;
height: 300px;
background-color: bisque;
}flex样式
body {
margin: 0;
}
#container {
display: flex;
}
#left {
height: 300px;
background-color: aqua;
flex-grow: 3;
}
#right {
height: 300px;
background-color: bisque;
flex-grow: 7;
}2.实现一个两栏布局，左侧固定宽度，右侧根据浏览器宽度进行自适应变化
3.实现一个两栏布局，右侧固定宽度，左侧根据浏览器宽度进行自适应变化
4.实现一个三栏布局，左侧固定宽度，右侧固定宽度，中间部分宽度随浏览器宽度变化而自适应变化
5.实现一个三栏布局，左侧固定宽度，中间固定宽度，右侧根据浏览器宽度变化而自适应变化