CSS3实现了左右固定中间自适应的几种方法
2021-04-22 10:27
标签：dde 20px css col 方法 display str isp float 1，弹性盒（flex）布局 中间 .center 区域设置 flex-grow: 1 或者 width: 100% 2, 利用浮动（注意div排版的结构） 3，定位 （注意div排版的结构） 4, 双飞翼布局 CSS3实现了左右固定中间自适应的几种方法 标签：dde 20px css col 方法 display str isp float 原文地址：https://www.cnblogs.com/shun1015/p/12243601.html.container {
width: 100%;
min-height: 200px;
background-color: red;
display: flex;
}
.container .left {
width: 200px;
height: 200px;
background-color: purple;
}
.container .right {
width: 150px;
height: 200px;
background-color: blue;
}
.container .center {
/* flex-grow: 1; */
width: 100%;
height: 200px;
background-color: orange;
}
.container{
width: 100%;
/* background-color: green;
min-height: 500px; */
}
.left{
width: 200px;
height: 300px;
background-color: pink;
float: left;
}
.right{
width: 150px;
height: 300px;
background-color: purple;
float: right;
}
.center{
height: 300px;
margin-left: 200px;
margin-right: 150px;
background-color: blue;
}
.container {
width: 100%;
position: relative;
}
.left {
width: 200px;
height: 300px;
background-color: pink;
position: absolute;
top: 0;
left: 0;
position: absolute;
}
.right {
width: 150px;
height: 300px;
background-color: purple;
position: absolute;
top: 0;
right: 0;
}
.center {
height: 300px;
margin-left: 200px;
margin-right: 150px;
background-color: blue;
}
body {
min-width: 550px;
font-weight: bold;
font-size: 20px;
}
#container {
overflow: hidden;
}
#left,
#right,
#center {
float: left;
}
#center {
width: 100%;
background: rgb(206, 201, 201);
}
#left {
width: 200px;
margin-left: -100%;
background: rgba(95, 179, 235, 0.972);
}
#right {
width: 150px;
margin-left: -150px;
background: rgb(231, 105, 2);
}
.content {
margin: 0 150px 0 200px;
}