圣杯布局详解--浮动
程序员文章站
2022-03-12 21:57:08
圣杯布局是什么:圣杯布局是两边固定宽度,中间自适应的三栏布局。中间栏放到文档流前面,先行渲染。目的是为了解决三栏布局。浮动实现:实现效果:首先HTML:头部 标签,内容区域里面包含中、左、右三个 div 标签。底部标签HTML代码://标题 &l...
圣杯布局是什么:
- 圣杯布局是两边固定宽度,中间自适应的三栏布局。
- 中间栏放到文档流前面,先行渲染。
- 目的是为了解决三栏布局。
浮动实现:
实现效果:
首先HTML:
- 头部
<header></header>
标签, - 内容区域
<div class="container"></div>
里面包含中、左、右三个 div 标签。 - 底部
<footer></footer>
标签
HTML代码:
//标题
<header><h4>Header内容区</h4></header>
//内容区
<div class="container">
//中间区域
<div class="middle column">
<h4>中间区域</h4>
<p>圣杯布局要求header和footer各自占领屏幕所有宽度,高度固定
中间的container是一个三栏布局
三栏布局两侧宽度固定不变,中间部分自动填充整个区域
中间部分的高度是三栏中最高的区域的高度
</p>
</div>
//左边区域
<div class="left column">
<h4>左边栏</h4>
</div>
//右边区域
<div class="right column">
<h4>右边栏</h4>
</div>
//清除浮动
<div style="clear: both"></div>
</div>
//底部
<footer><h4>Footer内容区</h4></footer>
CSS代码:
-
首先我们设置中间三栏 中、左、右三个div浮动。
-
我们设置中间
<div class="middle"></div>
的css宽度为100%占满整个大div,那么此时左右div块会被挤到下方去。(如下图所示) -
此时我们要设置外层内容区域的div左右padding以便给左右div回来时候一个位置。(效果如下图所示)
-
接下来我们要使左边栏回到上一行我们要给
<div class="left"></div>
一个相对定位(相对于其正常位置进行定位)position:relative
和margin-left:-100%
(为什么是100%?因为设置100%后它可以刚好和middle中间栏的左侧对齐); -
我们要给
<div class="left"></div>
添加right: 200px;
样式属性使其回到第一行的最左侧。 -
相同原理我们给右栏一个
margin-right: -150px;
使其回到原来位置,那么这个布局就完成啦。
*{
margin: 0;
padding: 0;
}
body{
min-width: 550px;
}
header{
height: 40px;
background-color: #50a0c3;
padding-top: 10px;
text-align: center;
line-height: 40px;
color: white;
}
.container{
padding-left: 200px;
padding-right: 150px;
}
.column{
float: left;
}
.middle{
width: 100%;
height: 350px;
background-color: salmon;
text-align: center;
padding-top: 50px;
}
.left{
width: 200px;
height: 400px;
background-color: #d8e6a4;
margin-left: -100%;
position: relative;
right: 200px;
text-align: center;
line-height: 400px;
}
.right{
width: 150px;
height: 400px;
margin-right: -150px;
text-align: center;
line-height: 400px;
background-color: #bed28c;
}
footer{
width: 100%;
height: 40px;
background-color: #5b6063;
text-align: center;
line-height: 40px;
}
本文地址:https://blog.csdn.net/weixin_43690348/article/details/111130809
推荐阅读
-
微信小程序通过js实现瀑布流布局详解
-
div+css布局必了解的列表元素ul ol li dl dt dd详解
-
android布局属性详解分享
-
Recyclerview添加头布局和尾布局、item点击事件详解
-
Illustrator浮动面板功能详解
-
iOS 自动布局框架 – Masonry 详解
-
Python连载60-Tkinter布局、按钮以及属性详解
-
Flutter 布局(二)- Padding、Align、Center详解
-
Flutter 布局(四)- Baseline、FractionallySizedBox、IntrinsicHeight、IntrinsicWidth详解
-
Flutter 布局(五)- LimitedBox、Offstage、OverflowBox、SizedBox详解