标签：right 三栏 布局 center height width background left
子绝父相 + 左left:0px 右right:0px 中间margin:width
<style>
.container {
position: relative;
height: 600px;
}
.left,
.right {
height: 100%;
position: absolute;
}
.left {
top: 0;
left: 0;
width: 350px;
background: deepskyblue;
}
.center {
margin-left: 350px;
margin-right: 550px;
background-color: red;
height: 100%;
}
.right {
top: 0;
right: 0;
width: 550px;
background: pink;
}
</style>
</head>
<body>
<div class="container">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
</body>
浮动布局 左float：left 右：float：right 中间：margin：width
<style>
* {
margin: 0;
}
.container {
height: 600px;
}
.left, .right {
height: 100%;
}
.left {
float: left;
width: 300px;
background: darkgreen;
}
.center {
height: 100%;
margin: 0 300px;
background: red;
}
.right {
float: right;
width: 300px;
background: deeppink;
}
</style>
</head>
<body>
<div class="container">
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
</div>
</body>
Flex布局：display:flex; 子中：flex: 1
<style>
.container {
height: 600px;
display: flex;
}
.left {
width: 200px;
background: green;
}
.right {
width: 300px;
background: orange;
}
.left, .right, .center {
height: 100%;
}
.center {
flex: 1;
background: red;
}
</style>
</head>
<body>
<div class="container">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
</body>
Grid布局 grid-template-columns: widthLeft auto widthRight
<style>
.container {
height: 600px;
display: grid;
grid-template-columns: 200px auto 300px;
}
.left,
.center,
.right {
height: 100%;
}
.left {
background: orange;
}
.center {
background: lightblue;
}
.right {
background: deeppink;
}
</style>
</head>
<body>
<div class="container">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
</body>
标签：right,
三栏,
布局,
center,
height,
width,
background,
left
From： https://www.cnblogs.com/openmind-ink/p/17064767.html