欢迎来到我的博客文章！所有文章都是满满的前端干货，文章简明扼要。
目的：两侧内容宽度固定，中间内容宽度自适应2.三栏布局，中间一栏最先加载、渲染出来(主要内容)
<style>
.header {
height: 50px;
background-color: lightgray;
text-align: center;
line-height: 50px;
}
.content {
display: flex;
}
.center {
background-color: lightgreen;
flex:1
}
.left {
background-color: lightblue;
width: 200px;
order:-1;
}
.right {
background-color: lightcoral;
width: 300px;
}
.footer {
height: 50px;
background-color: lightgray;
text-align: center;
line-height: 50px;
clear: both;
}
</style>
<body>
<div class="header">header</div>
<div class="content">
<div class="center">center</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="footer">footer content</div>
</body>
<style>
.header {
height: 50px;
background-color: lightgray;
text-align: center;
line-height: 50px;
}
.content {
display: grid;
grid-template-columns: 200px 1fr 300px;
gap: 10px; /* 可选间距 */
grid-template-areas: "left center right";
}
.center {
background-color: lightgreen;
grid-area: center;
}
.left {
background-color: lightblue;
width: 200px;
grid-area: left;
}
.right {
background-color: lightcoral;
width: 300px;
grid-area: right;
}
.footer {
height: 50px;
background-color: lightgray;
text-align: center;
line-height: 50px;
clear: both;
}
</style>
<body>
<div class="header">header</div>
<div class="content">
<div class="center">center</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="footer">footer content</div>
</body>
<style>
.header {
height: 50px;
background-color: lightgray;
text-align: center;
line-height: 50px;
}
.content {
/* display: flex; */
width: 100%;
padding-left: 200px;
padding-right: 300px;
box-sizing: border-box;
}
.center {
/* flex: 1; */
float: left;
width: 100%;
background-color: lightgreen;
}
.left {
float: left;
width: 200px;
margin-left: -100%;
position: relative;
right: 200px;
background-color: lightblue;
}
.right {
float: left;
width: 300px;
margin-right: -300px;
background-color: lightcoral;
}
.footer {
height: 50px;
background-color: lightgray;
text-align: center;
line-height: 50px;
clear: both;
}
</style>
<body>
<div class="header">header</div>
<div class="content">
<div class="center">center</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="footer">footer content</div>
</body>