CSS实现左右布局，三栏布局
css的两栏布局是⽐较经典的布局之⼀，⼀般是左（右）边定宽，右（左）边⾃适应。
实现的⽅式也⽐较多，今天主要介绍3种。
1.浮动⽅法，使第⼀个div浮动起来脱离⽂档流，下⾯的div⾃动向上
<body>
<div class="left">左边</div>
<div class="right">右边</div>
</body>
.left {
width: 200px;
height: 400px;
background: yellow;
float: left;
}
.right{
height: 400px;
background: #0000FF;
}
2.绝对定位法
此⽅法的原理是将左侧的div设置为position:absolute，右侧默认宽度，并将margin-left设置为和左侧div⼀样宽（如果要留间隙，可以⼤于左侧div宽度）
<body>
<div class="left">左边</div>
<div class="right">右边</div>
</body>
.left {
width: 200px;
height: 400px;
background: yellow;
position: absolute;
}
.right {
height: 400px;
background: #ccc;
margin-left: 200px;
}
3.弹性盒。display:flex; 设置为弹性盒⼦，其⼦元素可以通过设置flex的数值来控制所占空间⽐例
<body>
<div class="left">左边</div>
<div class="right">右边</div>
</body>
<style type="text/css">
body{
display: flex;
}
.
left {
width: 200px;
height: 400px;
background: yellow;
}
.right {
height: 400px;
background: #ccc;
flex: 1;
}
</style>
三栏布局
三列⾃适应布局指的是两边定宽，中间宽度⾃适应
1.绝对定位法
原理是将两边absolute定位，因为绝对定位使其脱离⽂档流，后⾯的center会⾃然流动到上⾯，然后使⽤margin属性，留出左右元素的宽度，使中间的元素⾃适应。
<body>
<div class="left">左边</div>
<div class="center">中间</div>
<div class="right">右边</div>
</body>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.left{
position: absolute;
height: 400px;
width: 400px;
left: 0;
top: 0;
background: yellow;
}
.
center{
height: 400px;
background: blueviolet;
}
.right{
position: absolute;
top: 0px;
right: 0px;
height: 400px;
width: 400px;
background: yellowgreen;
}
</style>
2.浮动定位
⾃⾝浮动定位的原理是使⽤float:left和float:right，float使左右两个元素脱离⽂档流，中间元素正常在⽂档流中。使⽤margin指定左右外边距对其进⾏定位。
<body>
<div class="left">左边</div>
<div class="right">右边</div>
<div class="center">中间</div>
</body>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.left{
width: 300px;
height: 300px;
background: #DEB887;
float: left;
}
.center{
height: 300px;
background: #008000;
margin: 0 310px;
}
.right{
width: 300px;
height: 300px;
background: #DEB887;
float: right;
}
</style>
三个元素的顺序，center⼀定要放在嘴和，center占据⽂档流位置，所以⼀定要放到最后，左右两个元素位置没有关系，当浏览器窗⼝很⼩的时候，右边元素会被挤到下⼀⾏
3.flex布局法
⽬测这应该是未来主流的布局⽅式
⽤⼀个box包裹三栏，设置容器display:flex，左右栏固定宽度300px，中间栏设置flex:1，这⾥的1表⽰宽度⽐例，具体数值取决于其他盒⼦的flex值。由于这⾥其他盒⼦宽度固定，所以中间栏会⾃动填充。
<body>
<div id="box">
<div class="left">左边</div>
css实现三列布局
<div class="center">中间</div>
<div class="right">右边</div>
</div>
</body>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box{
display: flex;
height: 300px;
}
.left{
width: 300px;
height: 300px;
background: #DEB887;
}
.center{
height: 300px;
background: #008000;
flex: 1;
}
.right{
width: 300px;
height: 300px;
background: #DEB887;
}
</style>
本⽂没有配图，读者可⾃⾏尝试

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。