《前端面试》必问的5种三栏布局精髓！！！
2019-05-14 本文已影响0人
MrHu1
一、浮动解决方案
<style>
html,body{
padding: 0;
margin: 0;
}
/* 浮动布局 */
#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>
五、网格布局
<body>
<!-- 网格布局的解决方案 -->
<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>
