一、单列布局：
二、两列布局：
1、table布局（过去的主流布局方式）通过 table tr td布局
2、class 类比表格的方式
3、弹性盒模型 flexbox 关键在于父元素： display:flex;
4、float 浮动 注意清除浮动（clear: both display:block）
5、inline-block布局 不存在清除浮动问题 适用与定宽的布局
6、定位
7、左侧可拖动，右侧有水平滚动条（使用resize属性+flex布局）
resize ：规定是否可由用户调整元素的尺寸，取值（none : 无法调整；both : 可调宽、高；horizontal : 可调宽；vertical : 可调高;)
<!-- <!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> -->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS两列布局</title>
<style type="text/css">
/*
两列布局：
1、table布局（过去的主流布局方式）通过 table tr td布局
2、class 类比表格的方式
3、弹性盒模型 flexbox 关键在于父元素： display:flex;
4、float 浮动 注意清除浮动（clear: both display:block）
5、inline-block布局 不存在清除浮动问题 适用与定宽的布局
6、定位
*/
* {
margin: 0;
padding: 0;
}
/* 方式一 表格 */
table {
width: 100%;
height: 300px;
border-collapse: collapse;
margin-bottom: 50px;
}
.left {
background-color: red;
}
.right {
background-color: blue;
}
/* 方式二 class 类表格*/
.table {
display: table;
width: 100%;
height: 300px;
border-collapse: collapse;
margin-bottom: 50px;
}
.tb_row {
display: table-row;
}
.tb_cell {
display: table-cell;
vertical-align: middle;
}
/* 方式三 flex*/
.parent3 {
width: 100%;
height: 100px;
display: flex;
}
.left3 {
width: 30%;
height: 100%;
background: aqua;
}
.right3 {
width: 70%;
height: 100%;
background:pink;
}
/* 方式四 浮动*/
/* float布局 （float+margin）
兼容性好 但是要注意清楚浮动（clear: both display:block）
- 两列布局——左侧定宽，右侧自适应
**关键：**
*左侧设置float：left
右侧：margin-left： leftWidth*
- 三列布局
**关键：**
*左侧设置float：left
右侧设置float:right
中间：margin-left： leftWidth；margin-right：rightWidth*
*/
.parent4 {
width: 100%;
height: 200px;
margin-bottom: 50px;
}
.left4 {
width: 400px;
height: 100%;
float: left;
background-color: red;
}
.right4 {
height: 100%;
margin-left: 200px;
background-color: blue;
}
/* 方式五 行内块 */
.parent5 {
font-size: 0;
width: 800px;
height: 200px;
}
.left5 {
font-size: 14px;
width: 300px;
height: 200px;
display: inline-block;
background-color: red;
}
.right5 {
font-size: 14px;
width: 500px;
height: 200px;
display: inline-block;
background-color: blue;
}
/* 方式六 定位*/
.parent6 {
width: 100%;
height: 200px;
position: relative;
}
.left6 {
width: 40%;
height: 200px;
position: absolute;
background-color: gold;
}
.right6 {
width: 60%;
height: 200px;
position: absolute;
right: 0;
background-color: green;
}
/* 左侧宽度大小可拖动，右侧出现水平滚动条 , 使用 resize + flex 布局，要是 resize 生效，必须设置 overflow 属性*/
.parent7 {
display: flex;
height: 200px;
border: 2px solid #888;
}
.left7 {
border-right: 2px solid #888;
width: 300px;
height: 100%;
resize: horizontal; /* 横向宽度可调整 */
overflow: hidden; /* 必须设置overflow，resize 才会生效 */
background: yellowgreen;
}
.right7 {
flex: 1;
height: 100%;
overflow-x: auto; /* 横向滚动条 */
width: calc(100vw - 200px); /* CSS3 calc() 函数用于动态计算长度值 注意，运算符 - 前后都需要保留一个空格 ; vw 相对于视口的宽度，视口被均分为100单位的vw*/
}
</style>
</head>
<body>
<!-- 方式一 -->
<h3>方式一 表格两列布局</h3>
<table>
<tr>
<td class="left">左</td>
<td class="right">右</td>
</tr>
</table>
<!-- 方式二 -->
<h3>方式二class 类表格两列布局</h3>
<div class="table">
<div class="tb_row">
<div class="left tb_cell">左</div>
<div class="right tb_cell">右</div>
</div>
</div>
<!-- 方式三 弹性盒模型 flex -->
<h3>方式三 弹性盒模型 flex</h3>
<div class="parent3">
<div class="left3">左</div>
<div class="right3">右</div>
</div>
<!-- 方式四 -->
<h3>方式四 浮动 两列布局</h3>
<div class="parent4">
<div class="left4">左</div>
<div class="right4">右</div>
</div>
<!-- **注意：float特点：尽量靠上，尽量靠左（右），所以右侧浮动div要先写，中间div后写** -->
<!-- 浮动三列布局
.middle{
margin-left: 200px; // 等于左侧宽度
margin-right: 200px; // 等于右侧宽度
} -->
<!-- <div class="parent">
<div class="left">左</div>
<div class="right">右</div>
<div class="middle">中</div>
</div> -->
<!-- 方式五 行内块 -->
<h3> 方式五 行内块 两列布局</h3>
<div class="parent5">
<div class="left5">左</div>
<div class="right5">右</div>
</div>
<!-- 注意： 想要父级元素的宽度等于两个子元素宽度之和，需要设置父级元素的 font-size：0 否则两个子元素不会再一行展示
同时，需要设置两个子元素的font-size: 14px； 否则子元素内的文字不会展示！
**想象成文字，注意间隙的处理！！！** 间隙存在于两个div间的空白 -->
<!-- 方式六 定位 -->
<h3> 方式六 定位 两列布局</h3>
<div class="parent6">
<div class="left6">左</div>
<div class="right6">右</div>
</div>
<!-- 案例 -->
<h3> 两列布局 之 左侧拖动</h3>
<div class="parent7">
<div class="left7">左</div>
<div class="right7">右</div>
</div>
</body>
</html>