两列布局
两列布局，左侧固定，右侧自适应的三种常用方法
<!DOCTYPE>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>两列布局</title>
<style>
/*方法1：流体布局。左元素float,右元素margin-left或者overflow*/
.one {
float: left;
height: 100px;
width: 300px;
background-color: blue;
}
.two {
overflow: auto; /*hidden*/
/*margin-left: 300px;*/
height: 200px;
background-color: red;
}
/*方法2：绝对定位布局。左元素absolute,右元素同上形成BFC*/
/* .one {
position: absolute;
height: 100px;
width: 300px;
background: blue;
left: 0;
}
.two {
overflow: auto;
height: 100px;
width: 100%;
background: red;
} */
/*方法3：flex布局。父元素flex，右元素给定flex的值*/
/*body{
display: flex;
}
.one {
height: 100px;
width: 300px;
background-color: blue;
}
.two {
flex:1;
background-color: red;
height: 200px;
}*/
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
</body>
</html>
如果下方再加一个元素，对于方法1和3没什么影响，对于flex布局需要把元素1和2放在一个div里
<!DOCTYPE>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.top{
display: flex;
flex-direction: row;
}
.one {
height: 100px;
width: 300px;
background-color: blue;
}
.two {
flex: 1;
height: 200px;
background-color: red;
}
.three{
height: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="top">
<div class="one"></div>
<div class="two"></div>
</div>
<div class="three"></div>
</body>
</html>
