题目来源于今日头条一面,当时想的不全,现在总结一下
第一种方法:浮动布局
<style>
body {
padding:50px;
}
* {
box-sizing: border-box;
}
.clearfix::after {
content: '';
display: block;
clear: both
}
.parent {
width: 100%;
border: 1px solid red
}
.parent > div {
float: left;
}
.left {
width: 200px;
background-color: aqua;
}
.right {
width: 30%;
background-color:blue;
}
.center {
width: calc(70% - 200px);
background-color:brown;
}
</style>
<div class="parent clearfix">
<div class="left">
left
</div>
<div class="center">
center
</div>
<div class="right">
right
</div>
</div>
效果图:
第二种方法:绝对定位
<style>
body {
padding:50px;
}
* {
box-sizing: border-box;
}
.parent {
width: 100%;
border: 1px solid red;
position: relative;
}
.left {
position: absolute;
width: 200px;
left: 0;
background-color: aqua;
}
.right {
position: absolute;
width: 30%;
right: 0;
background-color:blue;
}
.center {
position: absolute;
left: 200px;
right: 30%;
background-color:brown;
}
第三种:flex布局
<style>
body {
padding:50px;
}
* {
box-sizing: border-box;
}
.parent {
width: 100%;
border: 1px solid red;
display: flex;
}
.left {
width: 200px;
background-color: aqua;
}
.right {
width: 30%;
background-color:blue;
}
.center {
flex: 1;
background-color:brown;
}
</style>
第四种 grid布局
body {
padding:50px;
}
* {
box-sizing: border-box;
}
.parent {
width: 100%;
border: 1px solid red;
display: grid;
grid-template-columns: 200px auto 30%;
}
.left {
background-color: aqua;
}
.right {
background-color:blue;
}
.center {
background-color:brown;
}
效果: