一、浮動(dòng)解決方案
<style>
html,body{
padding: 0;
margin: 0;
}
/* 浮動(dòng)布局 */
#left,#right{
width: 300px;
height: 200px;
background-color: #ffe6b8;
}
#left{
float: left;
}
#right{
float: right;
}
#center{
height: 500px;
overflow: hidden;
background-color: #a0b3d6
}
</style>
</head>
<body>
<div id="left">我是左邊</div>
<div id="right">我是右邊</div>
<div id="center">我是中間</div>
</body>
</html>
二、彈性盒子布局
<style>
body {
padding: 0;
margin: 0;
}
/* 彈性盒子布局 */
#box{
display: flex;
width: 100%;
height: 300px;
}
#left,#right{
height: 300px;
width: 300px;
background: blue;
}
#center{
flex: 1;
height: 300px;
background: red;
}
</style>
</head>
<body>
<div id="box">
<div id="left">我是左邊</div>
<div id="center">我是中間</div>
<div id="right">我是右邊</div>
</div>
</body>
三、圣杯布局
<style>
*{
padding: 0;
margin: 0;
}
#box{
padding: 0 220px;
}
html,body{
width: 100%;
}
#left,#center,#right{
min-height: 150px;
}
#left,#right{
width: 220px;
}
#left{
margin-left: -220px;
background: green;
}
#center{
width: 100%;
background: darkcyan;
}
#right{
margin-right: -220px;
background: darkmagenta;
}
#left,#center,#right{
float: left;
}
</style>
</head>
<body>
<div id="box">
<div id="left"></div>
<div id="center"></div>
<div id="right"></div>
</div>
</body>
四、雙飛翼布局
<style>
body{
padding: 0;
margin: 0;
}
.left,.main,.right{
float: left;
min-height: 200px;
text-align: center;
}
.left{
margin-left: -100%;
width: 300px;
background: blue;
}
.right{
margin-left: -300px;
width: 300px;
background: pink;
}
.main{
width: 100%;
background: green;
}
.content{
margin: 0 300px 0 300px;
}
</style>
</head>
<body>
<div class="container">
<div class="main">
<div class="content">middle</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
五、網(wǎng)格布局
<body>
<!-- 網(wǎng)格布局的解決方案 -->
<div class="layout grid">
<style>
.layout.grid .left-center-right {
display: grid;
width: 100%;
grid-template-rows: 100px;
grid-template-columns: 300px auto 300px;
}
.layout.grid .left {
background: red;
}
.layout.grid .center {
height: 500px;
background: yellow;
}
.layout.grid .right {
background: blue;
}
</style>
<div class="left-center-right">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
</div>
</body>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。
