文章目录
方式1：使用浮动 + margin
适用于已知左侧元素宽度的情况。
<div class="left"></div>
<div class="right"></div>
.left {
width: 200px;
height: 100px;
background-color: green;
float: left;
}
.right {
height: 100px;
background-color: red;
margin-left: 200px;
}
效果如图：
其实我们不指定右侧div的margin也可以，这时右侧div的宽度是100%，而左侧div因为浮动了，所以会覆盖在右侧的div上。
方式2：使用绝对定位 + margin
适用于已知左侧元素宽度的情况。
.left {
width: 200px;
height: 100px;
background-color: green;
position: absolute; /* 只改变了这一行代码 */
}
.right {
height: 100px;
background-color: red;
margin-left: 200px;
}
方式3：使用浮动 + BFC
这种方式在不知道左侧元素宽度的情况下，也可以用。
.left {
width: 200px;
height: 100px;
background-color: green;
float: left;
}
.right {
height: 100px;
background-color: red;
/* 只改变了这一行代码 */
overflow: hidden; /* 开启BFC */
}
如果不了解BFC，请阅读：CSS中的BFC是什么？怎么用？
方式4：使用flex布局
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
.container {
display: flex;
}
.left {
width: 200px;
height: 100px;
background-color: green;
}
.right {
flex: 1;
background-color: red;
}
给父元素设置为flex布局，里边的两个子元素就会在同一行显示。左侧的子元素的宽度固定，右侧的子元素设置为flex:1。
这里解释一下flex:1的意思。flex 属性其实是 flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。 如果所有项目（开启flex布局的元素称为容器，内部的子元素称为项目）的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。 如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
当我们指定flex:1时，元素将等分父容器中的剩余空间，相当于指定了flex-grow:1，flex-shrink:1，flex-basis:0%，可以在浏览器的开发者工具中看到。
扫描二维码关注公众号，回复：
14563815 查看本文章
方式5：使用table
这种方式在不知道左侧元素宽度的情况下，也可以用。
<table>
<tr>
<td class="left"></td>
<td class="right"></td>
</tr>
</table>
table {
width: 100%;
/* 用于去除两个td之间的间距 */
border-collapse: collapse;
}
.left {
width: 200px;
height: 100px;
background-color: green;
}
.right {
background-color: red;
}
方式6：使用display设置为table布局
这种方式在不知道左侧元素宽度的情况下，也可以用。
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
.container {
display: table;
width: 100%;
}
.left {
display: table-cell;
width: 200px;
height: 100px;
background-color: green;
}
.right {
display: table-cell;
background-color: red;
}
这种方式本质上和方式5是一样的。因为即使是真正的table标签，它的底层也是使用display:table，我们可以打开浏览器控制台查看：
总结：
方式1和方式2：只适用于知道左侧元素的固定宽度的情况下。
方式3到方式6：在不知道左侧元素宽度的情况下，也可以用。
参考资料：
前端学习交流QQ群，群内学习讨论的氛围很好，大佬云集，期待您的加入：862748629 点击加入