HTML结构
<div class="twocol">
<div class="left">left</div>
<div class="right">right</div>
</div>
CSS样式
* {
margin: 0;
padding: 0;
}
.twocol {
background: #ccc;
font-size: 20px;
text-align: center;
height: 400px;
line-height: 400px;
}
1、float + margin-left
.left{
background: pink;
float: left;
width: 200px;
height: 400px;
}
.right {
margin-left: 200px;
background: skyblue;
height: 400px;
}
2、flex
.twocol {
background: #ccc;
font-size: 20px;
text-align: center;
height: 400px;
line-height: 400px;
display: flex;
}
.left{
background: pink;
width: 200px;
height: 400px;
}
.right {
background: skyblue;
height: 400px;
flex: 1;
}
3、table
.twocol {
background: #ccc;
font-size: 20px;
text-align: center;
width: 100%;
height: 400px;
line-height: 400px;
display: table;
}
.left{
background: pink;
width: 200px;
height: 400px;
display: table-cell;
}
.right {
background: skyblue;
height: 400px;
display: table-cell;
}
需要注意:使用table的时,父元素需要设置宽度。不然宽度为表格除了其他元素外,剩余空间。
4、float+overflow
.left{
background: pink;
float: left;
width: 200px;
height: 400px;
}
.right {
background: skyblue;
height: 400px;
overflow: hidden;
}
5、absolute + margin-left
.twocol {
background: #ccc;
font-size: 20px;
text-align: center;
height: 400px;
line-height: 400px;
position: relative;
}
.left{
background: pink;
width: 200px;
height: 400px;
position: absolute;
left: 0;
top: 0;
}
.right {
margin-left: 200px;
background: skyblue;
height: 400px;
}
6、absolute
.twocol {
background: #ccc;
font-size: 20px;
text-align: center;
height: 400px;
line-height: 400px;
position: relative;
}
.left{
background: pink;
width: 200px;
height: 400px;
position: absolute;
left: 0;
top: 0;
}
.right {
background: skyblue;
height: 400px;
position: absolute;
left: 200px;
top: 0;
width: 100%;
}
7、grid
.twocol {
background: #ccc;
font-size: 20px;
text-align: center;
line-height: 400px;
display: grid;
grid-template-rows: 400px;
grid-template-columns: 200px auto;
}
.left{
background: pink;
}
.right {
background: skyblue;
}