圣杯布局详解–浮动

圣杯布局是什么：

浮动实现：

实现效果：

首先HTML：

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">   dna合成         <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: -150p09淘宝店x;使其回到原来位置，那么这个布局就完成啦。

*{             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