代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<style>
.main{
width:200px;
height:100px;
}
.left{
background-color:lightsalmon;
}
.right{
background-color:lightskyblue;
}
</style>
<body>
<table class="main">
<tbody>
<tr>
<td class="left">1</td>
<td class="right">2</td>
</tr>
</tbody>
</table>
</body>
</html>
推荐阮一峰老师的flex教程
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<style>
.main{
display:flex;
width:300px;
height:100px;
/* 排列方向 flex-direction
row：从左到右 row-reverse:从右到左
column:从上到下 column-reverse:从下到上
*/
flex-direction: row;
/* 换行 flex-wrap
nowrap:(默认) 不换行
wrap: 换行 第一行在上
wrap-reverse: 换行 第一行在下
*/
flex-wrap: nowrap;
/* flex-flow 是 flex-direction 和 flex-wrap 的简写
模板为 flex-flow: <flex-direction> || <flex-wrap>
*/
/* 主轴上的对齐方式 justify-content
flex-start:(默认)左对齐
flex-end:右对齐
center:居中
space-between:两端对齐，项目之间间隔相等
space-around:每个项目之间两侧的间隔都相等
*/
justify-content: space-between;
/* 交叉轴上对齐 align-items
flex-start:交叉轴起点对齐
flex-end:交叉轴终点对齐
center:交叉轴中点对齐
baseline:项目的第一行文字对齐
stretch:(默认)如果项目未设置高度或auto，将占满整个容器的高度
*/
align-items:center;
/* align-content 定义多根轴线的对齐方式 */
}
.left{
width:50px;
background-color:lightsalmon;
}
.contain{
width:50px;
background-color:lightskyblue;
}
.right{
width:50px;
background-color:lightgreen;
}
</style>
<body>
<div class="main">
<div class="left">1</div>
<div class="contain">2</div>
<div class="right">3</div>
</div>
</body>
</html>原文：https://www.cnblogs.com/Zxq-zn/p/11849085.html