三栏布局——圣杯+双飞翼

最新推荐文章于 2024-06-13 10:31:50 发布

Komorebi゛

最新推荐文章于 2024-06-13 10:31:50 发布

阅读量140

点赞数

分类专栏： CSS 文章标签： html css

本文链接：https://blog.csdn.net/Komorebi_00/article/details/111614995

版权

CSS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

三栏布局

圣杯布局的思路：

页面布局时，中间弹性区域放在最上层，首先渲染
给他们分别设置浮动：左栏，中间栏左浮动，右栏右浮动
使用负margin把左右两栏拉回同一行
接下来解决中间区域被遮挡
父元素设置padding给左右两栏留出空位
左右两栏再使用相对定位铺满

<style>
	/* 圣杯布局 */
	.box1 {
	  border: 1px solid red;
	  height: 100px;
	  padding: 0 80px;
	}
	.box1 .left {
	  width: 80px;
	  height: 100px;
	  background-color: rgb(185, 201, 253);
	  float: left;
	  margin-left: -100%;
	  position: relative;
	  left: -80px;
	}
	.box1 .right {
	  width: 80px;
	  height: 100px;
	  background-color: rgb(178, 224, 250);
	  float: left;
	  margin-left: -80px;
	  position: relative;
	  right: -80px;
	}
	.box1 .center {
	  width: 100%;
	  height: 100px;
	  background-color: rgb(141, 192, 250);
	  float: left;
	}
</style>
<body>
	<div class="box1">
	    <div class="center">圣杯布局中间弹性区域</div>
	    <div class="left">左固定</div>
	    <div class="right">右固定</div>
	</div>
</body>

双飞翼布局的思路：

页面布局时，，中间弹性区域放在最上层，首先渲染
给他们分别设置浮动：左栏，中间栏左浮动，右栏右浮动
使用负margin把左右两栏拉回同一行
接下来解决中间区域被遮挡
给中间区域套一层div，设置宽度100%，浮动
里面内容区域设置左右margin来给两边区域让位

<style>
/* 双飞翼布局 */
.box2 {
  border: 1px solid red;
  height: 100px;
}
.box2 .center-box {
  width: 100%;
  float: left;
}
.box2 .center {
  height: 100px;
  background-color:rgb(141, 192, 250);
  margin: 0 80px;
}
.box2 .left {
  width: 80px;
  height: 100px;
  background-color: rgb(185, 201, 253);
  float: left;
  margin-left: -100%;
}
.box2 .right {
  width: 80px;
  height: 100px;
  background-color: rgb(178, 224, 250);
  float: left;
  margin-left: -80px;
}
</style>

<body>
<div class="box2">
  <div class="center-box">
    <div class="center">双飞翼布局中间弹性区域</div>
  </div>
  <div class="left">左固定</div>
  <div class="right">右固定</div>
</div>
</body>

Komorebi゛

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
三栏布局——圣杯+双飞翼

三栏布局圣杯布局的思路：页面布局时，中间弹性区域放在最上层，首先渲染给他们分别设置浮动：左栏，中间栏左浮动，右栏右浮动使用负margin把左右两栏拉回同一行接下来解决中间区域被遮挡父元素设置padding给左右两栏留出空位左右两栏再使用相对定位铺满<style> /* 圣杯布局 */ .box1 { border: 1px solid red; height: 100px; padding: 0 80px; } .box1 .left {
复制链接

扫一扫