css实现三栏水平布局双飞翼与圣杯布局
2024-09-08 04:16:17
作为布局的入门级选手，网上也查看了很多信息和资源
双飞翼的html结构
<div class="container">
<div class="main">
<div class="content">main</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
双飞翼和圣杯的布局方式类似，都用到了关键的浮动和负值的margin-left
第一步：先正常设置长宽，同一高度为120px，由于是标准流的缘故，所以三个div盒子一共分为三层
.left, .right, .main {
height: 120px;
}
.content {
margin: 0 300px 0 200px;
}
.left {
width: 200px;
background-color: green;
}
.right {
width: 300px;
background-color: red;
}
.main {
width: 100%;
background-color: blue;
}
效果如下
第二步：添加浮动，全部脱离标准流，因为main是的宽度是100%，占满整个盒子的宽度，所以left和right的盒子被挤到第二行
.left, .right, .main {
height: 120px;
float: left;
}
.content {
margin: 0 300px 0 200px;
}
.left {
width: 200px;
background-color: green;
}
.right {
width: 300px;
background-color: red;
}
.main {
width: 100%;
background-color: blue;
}
效果如下
第三步：使用margin-left的负值属性来实现这个效果
这个margin-left:-100%指的是子盒子的左边框相对父盒子的右边框的距离
.left, .right, .main {
height: 120px;
float: left;
text-align: center;
}
.content {
margin: 0 300px 0 200px;
}
.left {
width: 200px;
background-color: green;
margin-left: -100%;
}
.right {
width: 300px;
background-color: red;
margin-left: -300px;
}
.main {
width: 100%;
background-color: blue;
}
相对第二步，就多了margin-left的属性
先看right盒子，相对父盒子container，他的左边框必须距离container的右边框300px，所以是margin-left: -300px;
left一样，left盒子的左边框必须距离父盒子的右边框的100%个宽度，所以是margin-left: -100%;
效果如下
圣杯的布局类似双飞翼
多了定位，div相对少了一个
<div class="container">
<div class="middle">middle</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
.container {
padding: 0 300px 0 200px;
}
.left,.right,.middle {
height: 120px;
float: left;
position: relative;
text-align: center;
}
.middle {
width: 100%;
background-color: blue;
}
.left {
left: -200px;
width: 200px;
margin-left: -100%;
background-color: green;
}
.right {
right: -300px;
width: 300px;
margin-left: -300px;
background-color: red;
}
关于圣杯布局可以参考博客
https://blog.csdn.net/wangchengiii/article/details/77926868
最新文章
- android 关闭多个或指定activity
- Android5.1.1 - APK签名校验分析和修改源码绕过签名校验
- JAVA EE中session的理解
- MongoDB的基础知识
- List与Set的使用
- 游戏 window
- hdu_3555 bomb
- NOIP总结
- VS编译时自动下载NuGet管理的库
- 1293: [SCOI2009]生日礼物 - BZOJ
- Xamarin devexpress Grid
- MFC自绘控件学习总结第二贴---转
- Push or Pull?
- [Baltic2004]数字序列
- 论文学习-深度学习目标检测2014至201901综述-Deep Learning for Generic Object Detection A Survey
- Shiro权限模型以及权限分配的两种方式
- html_学习地址
- Element.querySelector和Element.querySelectorAll和jQuery(element).find(selector)选择器的区别
- BackBone结合ASP.NET MVC实现页面路由操作
- 测试开发之前端——No4.HTML5中的事件属性