圣杯布局和双飞翼布局

最新推荐文章于 2025-05-29 16:16:54 发布

studyForWhat

最新推荐文章于 2025-05-29 16:16:54 发布

阅读量221

点赞数

CC 4.0 BY-SA版权

分类专栏：学生文章标签： css

本文链接：https://blog.csdn.net/studyForWhat/article/details/89212036

学生专栏收录该内容

24 篇文章

订阅专栏

记录一下

圣杯布局

<div class = "container">
  	<div class = "main">main</div>
	<div class = "left">left</div>
	<div class = "right">right</div>
</div>

*{
  margin: 0;
}
.container{
padding-left:100px;
padding-right: 100px;
}
.main{
  width: 100%;
  float:left;
  height: 150px;
  background-color: green;
}
.left{
  width: 100px;
  height: 150px;
  background-color: pink;
  float: left;
  margin-left:-100%;
  position: relative;
  left: -110px; 
}
.right{
  width: 100px;
  height: 150px;
  background-color: purple;
  float: left;
  margin-left: -100px;
  position: relative;
  right: -110px; 
}

双飞翼布局

<div class = "container">
  <div class = "main">main</div>
</div>
<div class = "left">left</div>
<div class = "right">right</div>


*{
  margin: 0;
}
.container{
  float: left;
  width: 100%;
}
.main{
  height: 150px;
  background-color: green;
  margin-left: 100px;
  margin-right: 100px;
}
.left{
  width: 100px;
  height: 150px;
  background-color: pink;
  float: left;
  margin-left:-100%;
}
.right{
  width: 100px;
  height: 150px;
  background-color: purple;
  float: left;
  margin-left: -100px;
}