圣杯式布局和双飞翼布局的区别

最新推荐文章于 2024-04-16 19:34:40 发布

꧁薇博꧂

最新推荐文章于 2024-04-16 19:34:40 发布

阅读量1.9k

点赞数 1

本文链接：https://blog.csdn.net/PJW_WYB/article/details/108310461

版权

圣杯布局和双飞翼布局的共同点：
三列布局，两边定宽，中间自适应布局，要注意的是中间栏(重要的东西)要在放在文档流前面以优先渲染。
1、圣杯式布局定义：

圣杯布局是两边固定宽度，中间自适应的三栏布局，其中，中间栏放到文档流前面，保证先行渲染。
解决方案大体都是三栏全部float:left浮动，而在解决中间栏div的内容不被遮挡上，圣杯布局是中间
栏在添加相对定位，并配合left和right属性，效果上表现为三栏是单独分开的。

圣杯式布局代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>圣杯式布局</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

       
        .con{
            padding-left:150px ;

最低0.47元/天解锁文章

꧁薇博꧂

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
圣杯式布局和双飞翼布局的区别

圣杯布局和双飞翼布局的共同点：三列布局，两边定宽，中间自适应布局，要注意的是中间栏(重要的东西)要在放在文档流前面以优先渲染。1、圣杯式布局定义：圣杯布局是两边固定宽度，中间自适应的三栏布局，其中，中间栏放到文档流前面，保证先行渲染。解决方案大体都是三栏全部float:left浮动，而在解决中间栏div的内容不被遮挡上，圣杯布局是中间栏在添加相对定位，并配合left和right属性，效果上表现为三栏是单独分开的。圣杯式布局代码：<!DOCTYPE html><html l
复制链接

扫一扫