CSS中的圣杯布局与双飞翼布局

更新日期: 2019-11-25阅读: 1.7k标签: 布局

一,圣杯布局

1,什么是圣杯布局?

所谓圣杯布局就是用于实现一个两侧宽度固定,中间宽度自适应的三栏布局

2,构建圣杯布局的步骤:

    2.1,添加一个容器,在这个容器中添加放三个盒子(左、中、右);

    2.2,设置两侧盒子(左、右)的宽度 ,使其宽度固定;

    2.3,设置中间盒子的宽度为100%,这是中间盒子宽度自适应的关键;

    2.4,设置容器的padding-leftpadding-right属性,属性值分别为左盒子的宽度和右盒子的宽度;

    2.5,让三个盒子都向左浮动,向右浮动可能会出现问题,所以都设置向左浮动;

    2.6,设置左盒子的margin-left属性为-100%

    2.7,通过相对定位调整左边的盒子, 使左边的盒子不盖住中间盒子的区域;

    2.8,设置右边盒子的margin-left属性为负的自身的宽度;

    2.9,同样的通过相对定位调整右边的盒子, 使右边的盒子不盖住中间盒子的区域;

    2.10,最后一步就是给容器设置一个最小宽度min-width属性,防止它缩小后变形。

3,具体示例如下

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .left, .right{
            width: 200px;
            height: 200px;
            background-color: red;
            float: left;
        }
        .left{
            margin-left: -100%;
            position: relative;
            left: -200px;
        }
        .right{
            margin-left: -200px;
            position: relative;
            right: -200px;
        }
        .center{
            width: 100%;
            height: 200px;
            background-color: green;
            float: left;
        }
        .box{
            padding: 0 200px;
            min-width: 400px;
        }
    </style>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圣杯布局</title>
</head>
<body>
    <div class="box">
        <div class="center">圣杯布局圣杯布局圣杯布圣杯布局圣杯布局圣杯布局圣杯布局圣杯布局圣杯布局圣杯布局圣杯布局
            圣杯布局圣杯布局圣杯布局圣杯布局圣杯布局圣杯布局圣杯布局圣杯布局圣杯布局圣杯布局圣杯布局圣杯布局圣杯布局
            圣杯布局圣杯布局圣杯布局圣杯布局圣杯布局圣杯布局圣杯布局圣杯布局</div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>

二,双飞翼布局

1,什么是双飞翼布局? 

和圣杯布局一样,双飞翼布局也是用于实现一个两侧宽度固定,中间宽度自适应的三栏布局,就是布局的形式上存在差异    

2,构建双飞翼布局的步骤

    2.1,添加一个容器,在这个容器中添加三个盒子(左、中、右);

    2.2,设置两侧盒子(左、右)的宽度 ,使其宽度固定;

    2.3,设置中间盒子的宽度为100%,这也是双飞翼布局中中间盒子宽度自适应的关键;

    2.4,让三个盒子都向左浮动,向右浮动可能会出现问题,所以都设置向左浮动;

    2.5,再给中间的盒子添加一个子盒子;

    2.6,设置子盒子margin-leftmargin-right属性,属性值分别为左盒子的宽度和右盒子的宽度;

    2.7,设置左盒子的margin-left属性为-100%;

    2.8,设置右边盒子的margin-left属性为负的自身的宽度;

3,具体示例如下

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .left, .right{
            width: 200px;
            height: 200px;
            background-color: skyblue;
            float: left;
        }
        .left{
            margin-left: -100%;
        }
        .right{
            margin-left: -200px;
        }
        .center{
            width: 100%;
            height: 200px;
            background-color: brown;
            float: left;
        }
        .center>.center_in{
            margin: 0 200px;
            height: 200px;
            background-color: yellow;
        }
        .box{
            overflow: hidden;
        }
    </style>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>双飞翼布局</title>
</head>
<body>
    <div class="box">
        <div class="center">
            <div class="center_in">双飞翼布局双飞翼布局双飞翼布局双飞翼布局双飞翼布局双飞翼布局双飞翼布局双飞翼布局
                双飞翼布局双飞翼布局双飞翼布局双飞翼布局双飞翼布局双飞翼布局双飞翼布局双飞翼布局
                双飞翼布局双飞翼布局双飞翼布局双飞翼布局双飞翼布局双飞翼布局双飞翼布局双飞翼布局</div>
        </div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>

 

链接: https://fly63.com/article/detial/7719

css两端对齐——div+css布局实现2端对齐的4种方法总结

css两端对齐,通过margin负值、justify、space-between、column-count等多种方式来实现css的两端对齐。

flex布局,学习flex弹性布局总结

flex布局(Flexible Box)是对界面css盒模型的一个优化,适应不同尺寸的屏幕,被定义flex的容器可以控制子元素的排列方向和大小,能够用更简单清晰的代码来完成复杂的布局。

html通过css,js实现div悬浮效果总汇,如原生JS实现滚动到一定位置实现div悬浮

在我们的实际开发中,经常会遇到页面中需要悬浮效果,本文将介绍通过fixed的实现,以及通过原生Js实现滚动到一定位置,实现div的悬浮

理解css中Grid布局,在项目中如何实现grid页面布局

CSS中Grid是一种二维网格式布局方式,Grid是为了解决二维布局问题而创建的CSS模块。使用Gird的好处,Gird在浏览器的兼容性,Grid布局的示例源码...

使用flex实现5种常用布局

flex常用布局:经典的上-中-下布局。在上-中-下布局的基础上,加了左侧定宽 sidebar。左边是定宽 sidebar,右边是上-中-下布局。还是上-中-下布局,区别是 header 固定在顶部,不会随着页面滚动。左侧 sidebar 固定在左侧且与视窗同高,当内容超出视窗高度时,在 sidebar 内部出现滚动条。

你以为 CSS 只是个简单的布局?

本文中,所有的图形都是在单个标签内实现的,大量使用了 CSS3 中的 ::before 、::after 伪元素,transparent 、border,多重线性与径向渐变,多重内外阴影,如果你的效果不尽人意,请尝试在 Chrome 浏览器下预览。

html实现时间轴_纯css实现响应式竖着/垂直时间抽布局效果

html实现用时间点来展示事件发生点来代替用table展示一条条数据,能够给人清晰、一目了然能够看清事情发生的过程,UI页面也显示的那么清晰。如何用css+html做出时间轴展示事件点的?

基于jquery 横向/纵向 时间轴插件推荐

这篇文章主要整理一些关于基于jquery,实现横向/纵向时间轴的插件推荐:jquery.jqtimeline插件、timeline.js插件、Timeglider.js插件、Melon HTML5 、jQuery Timelinr、Timeline Porfolio

CSS position 属性_css中常用position定位属性介绍

css可以通过为元素设置一个position属性值,position定位是指定位置的定位,以下为常用的几种:static(静态定位)、relative定位(相对定位)、absolute定位(绝对定位)、fixed(固定定位)、inherit定位

css圣杯布局的实现方式

css圣杯布局思路:外面一个大div,里面三个小div(都是浮动)。实现左右两栏宽度固定,中间宽度自适应。中间栏优先渲染。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!