本文探讨了如何使用CSS创建一个经典的左中右三列布局。内容包括左侧栏、中间主要内容区域和右侧栏的设置，重点在于布局的响应性和兼容性，确保在不同屏幕尺寸下都能良好展示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
h2{
margin-top: 30px;
}
</style>
</head>
<body>
<h2>a.使用浮动布局</h2>
<section class="float">
<style>
.float .left{
float: left;
width: 100px;
background-color: red;
}
.float .right{
float: right;
width: 100px;
background-color: blue;
}
.float .center{
background-color: green;
}
</style>
<div class="left">left</div>
<div class="right">right</div>
<div class="center">center
<p>cent</p>
</div>
</section>
<h2>b.使用固定定位</h2>
<section class="position">
<style>
.position{
position: relative;
}
.position .left{
position: absolute;
left: 0;
width: 100px;
background-color: red;
}
.position .right{
position: absolute;
right: 0;
width: 100px;
background-color: blue;
}
.position .center{
margin: 0 100px;
background-color: green;
}
</style>
<div class="left">left
<p>cent</p>
<p>cent</p>
<p>cent</p></div>
<div class="right">right
<p>cent</p><p>cent</p><p>cent</p><p>cent</p></div>
<div class="center">center
<p>cent</p>
<p>ecfga</p>
<!--<p>ecfga</p>
<p>ecfga</p>
<p>ecfga</p>
<p>ecfga</p>
<p>ecfga</p>-->
</div>
<div>缺点就是当中间center的div币两端的div短时，现有内容会被影藏</div>
</section>
<h2>c.表格布局</h2>
<section class="table">
<style>
.table{
display: table;
width: 100%;
}
.table .left{
display: table-cell;
width: 100px;
background-color: red;
}
.table .right{
display: table-cell;
width: 100px;
background-color: blue;
}
.table .center{
display: table-cell;
background-color: green;
}
</style>
<div class="left">left
<p>cent</p>
<p>cent</p>
<p>cent</p>
</div>
<div class="center">center
<p>cent</p>
</div>
<div class="right">right
<p>cent</p><p>cent</p><p>cent</p><p>cent</p>
</div>
</section>
<h2>d.弹性布局</h2>
<section class="flex">
<style>
.flex{
display: flex;
}
.flex .left{
flex:0 0 100px;
background-color: red;
}
.flex .right{
flex:0 0 100px;
background-color: blue;
}
.flex .center{
flex:1;
background-color: green;
}
</style>
<div class="left">left
<p>cent</p>
</div>
<div class="center">center
<p>cent</p>
</div>
<div class="right">
<p>cent</p><p>cent</p><p>cent</p><p>cent</p>
</div>
</section>
<h2>e.网格布局</h2>
<section class="grid">
<style>
.grid{
display:grid;
grid-template-columns:100px auto 100px;
}
.grid .left{
background-color: red;
}
.grid .right{
background-color: blue;
}
.grid .center{
background-color: green;
}
</style>
<div class="left">left
<p>cent</p>
<p>cent</p>
<p>cent</p>
</div>
<div class="center">center
<p>cent</p>
</div>
<div class="right">right
<p>cent</p><p>cent</p><p>cent</p><p>cent</p>
</div>
</section>
<p>
这里前面两个并不算标准的三列布局，因为三列不等高。嗯，如果要求等高且高度已知的话，我们只要给三列设置一个固定高度即可。但如果高度未知又想实现等高，则只能用flex，grid和table布局
</p>
<section></section>
<h2>BFC完善float布局</h2>
<section class="BFC-float">
<style>
.BFC-float{
overflow: hidden; /* 不能少 */
}
.BFC-float .left{
float: left;
width: 100px;
background-color: red;
}
.BFC-float .right{
float: right;
width: 100px;
background-color: blue;
}
.BFC-float .center{
overflow: hidden; /*添加overflow:hidden，触发元素BFC 不能少*/
background-color: green;
}
</style>
<div class="left">
<p>left</p>
<p>left</p>
<p>left</p>
<p>left</p>
<p>left</p>
<p>left</p>
<p>left</p>
</div>
<div class="right">
<p>right</p>
<p>right</p>
<p>right</p>
</div>
<div class="center">
<p>center</p>
<p>center</p>
<p>center</p>
<p>center</p>
<p>center</p>
</div>
</section>
<p>
float布局问题：<br>
1中间高两边低，中间内容会出现在左边 <br>
2两边高中间低，外层的内容会和浮动元素重合
</p>
<h2>JS完善position布局</h2>
<section class="BFC-position">
<style>
.BFC-position{
position: relative;
}
.BFC-position:after{
content: '';
display: block;
visibility: hidden;
}
.BFC-position .left{
position: absolute;
left: 0;
width: 100px;
background-color: red;
}
.BFC-position .right{
position: absolute;
right: 0;
width: 100px;
background-color: blue;
}
.BFC-position .right:after{
content: ' ';
display: block;
visibility: hidden;
}
.BFC-position .center{
margin: 0 100px;
background-color: green;
overflow: hidden;
}
</style>
<div class="left">
<p>left</p>
<p>left</p>
</div>
<div class="right">
<p>right</p>
<p>right</p>
<p>right</p>
<p>right</p>
<p>right</p>
<p>right</p>
<p>right</p>
<p>right</p>
</div>
<div class="center">
<p>center</p>
<p>center</p>
<p>center</p>
<p>center</p>
<p>center</p>
</div>
</section>
<p style="overflow:hidden">
position布局问题：<br>
两边高中间低，外层的内容会和定位元素重合 <br>
解决：只能借助js算出绝对位较高的元素的高度，并将此值赋值给父级元素
<br>
注意使用：document.querySelector('.BFC-position .left').getBoundingClientRect().height获取；使用document.querySelector('.BFC-position .left').style.height获取的值为空字符串
</p>
<script>
/*console.log(document.querySelector('.BFC-position .left').getBoundingClientRect().height);*/
const h1=document.querySelector('.BFC-position .left').getBoundingClientRect().height;
const h2=document.querySelector('.BFC-position .right').getBoundingClientRect().height;
const h3 = h1>h2?h1:h2;
document.querySelector('.BFC-position').style.height=h3+'px';
</script>
</body>
</html>
扫一扫
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
