效果图
一、flex弹性布局
<style>
.container{
display: flex;
}
.left{
/* flex:0 0 100px; 不扩展、不收缩、固定宽度100px*/
height: 400px;
background: rgb(148, 145, 132);
flex:0 0 100px;
}
.right{
height: 400px;
background: rgb(148, 145, 132);
flex:0 0 100px;
}
.middle{
/* flex:auto; 等同于 flex:1 1 auto */
background: rgb(233, 230, 232);
flex: auto;
}
</style>
<div class="container">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
二、float浮动布局
浮动布局有两个重要的地方:
- HTML结构中的顺序是左侧、右侧、中间。(左中由顺序下,右侧的将会被挤到下一行)
- CSS样式中middle模块,要设置左右margin宽度为左右固定列宽度,否则中间模块会占据整个父容器覆盖左右固定列
<style>
.container{
height: 400px;
}
.left{
/*float: left;左浮动 */
background: yellow;
width: 100px;
height:inherit;
float: left;
}
.right{
/* float: right;右浮动 */
background: yellow;
width: 100px;
height:inherit;
float: right;
}
.middle{
/* 这里一定要设置左右边距 */
height: inherit;
background: yellowgreen;
margin-left: 100px;
margin-right: 100px;
}
</style>
这里一定要注意顺序是左、右、中
<div class="container" >
<!-- 这里注意顺序左、右、中 -->
<div class="left"></div>
<div class="right"></div>
<div class="middle"></div>
</div>
三、position定位布局
<style>
.container{
/* 包裹三列的这个大容器要设置相对定位 */
position: relative;
height: 400px;
}
.left{
width: 100px;
height: inherit;
background: rgb(83, 206, 34);
position: absolute;
}
/* 中间绝对定位,并且留出左右固定列的宽度,否则两侧的内容会被覆盖 */
.middle{
height: inherit;
background: goldenrod;
position: absolute;
left:100px ;
right: 100px;
}
.right{
/* 右侧绝对定位要指定距父容器右侧的宽度为0,实现靠右 */
width: 100px;
height: inherit;
background: rgb(83, 206, 34);
position: absolute;
right: 0;
}
</style>
<div class="container">
<div class="left">左侧</div>
<div class="middle">中间</div>
<div class="right">右侧</div>
</div>
四、grid网格布局
<style>
/* grid-template-columns:200px auto 200px;
定义网格容器的为3列,分别是200px、自动、200px
*/
.container{
height:400px;
display: grid;
grid-template-columns:200px auto 200px;
}
.left{
background: rgb(248, 166, 42);
}
.right{
background: rgb(248, 166, 42);
}
.middle{
background: rgb(236, 229, 127);
}
</style>
<div class="container">
<div class="left">左侧固定列宽200px</div>
<div class="middle">中间自适应</div>
<div class="right">右侧固定列宽200px</div>
</div>