🌺前言
圣杯布局的实现原理
html
<div class="warp">
<div class="content">
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
css
<style>
* {
padding: 0;
margin: 0;
}
.warp {
/* width: 100vw; */
height: 500px;
margin: 0 auto;
padding: 0 200px;
}
.content,
.left,
.right {
float: left;
height: 100%;
}
.content {
width: 100%;
background: pink;
}
.left,
.right {
width: 200px;
}
.left {
position: relative;
background: green;
margin-left: -100%;
left: -200px;
}
.right {
position: relative;
background: yellow;
margin-left: -200px;
right: -200px;
}
</style>
优点:不用增加dom节点
缺点:会变形
文章最后更新于 2024-08-06 20:57:01
作者:徐徐版权声明:转载请注明文章出处
留言

~~空空如也