当前位置：移动技术网 > IT编程>网页制作>CSS > css常见的各种布局下----三列布局

css常见的各种布局下----三列布局

2019年04月19日 | 移动技术网IT编程 | 我要评论

css 三列布局，左右固定宽度右边自适应

　　1不使用定位，只使用浮动可以实现左右固定，中间宽度自适应布局

　　　　　1.1.1 自适应部分一定要放第一个位子，使用浮动，并且设置宽度为100%，不设置浮动元素内容不够称不开整个宽度

　　　　　1.1.2 左右固定部位，使用margin-left :负数，使其左右靠齐

　　　　　1.1.3 中间自适应部分嵌套一个div，设置margin-left 和 margin-right 使其空出左右固定的宽度

<!doctype html>
<html lang="en-us">
<head>
    <meta charset="utf-8">
    <title>三列布局</title>
    <style>
    .box{
        height: 500px;
        background-color: bisque;
        position: relative;
    }
    .box .box-content {
        height: 100%;
        float: left; /* 一定要设置浮动，要不下面的模块上不来 */
        width:100%;/* 一定要设置100%，要不内容不够称不开整个页面 */
        background-color: blue; 
        /* 默认还是整行 */
        } 
    .box .box-content .child {
        margin: 0 210px;
            /* 中间模块空出左右距离，设置浮动 */
        background: red;
        height: 100%;
    }
    .box .box-left { 
        width: 200px; float: left; 
        margin-left: -100%; /* 设置浮动， margin-left:-100% 可以使元素往上移一行，并且移动到最左边 */ 
        height: 300px; 
        background-color: green; 
        } 
    .box .box-right { 
        float: left; 
        width: 200px; 
        min-height: 100%; 
        margin-left: -200px;/* 设置浮动， margin-left:负的自身宽度 可以使元素往上移一行，并且移动到最右边 */ 
        background-color: pink; 
        } 
    header,footer { height: 75px; background-color: aqua; } 
</style> 
</head>
<body> 
    <header> </header> 
    <div class="box"> 
        <div class="box-content">
            <div class="child">
                中间主题内容
            </div>
        </div>
        <div class="box-left">
            11dsdasdas不你弟弟呢单独
        </div>
        <div class="box-right">
            12酷酷酷酷酷的的是计算机技术升级的历史记录
        </div> 
    </div>
    <footer>

    </footer>
</body>
</html>

　　　1.2 其实只是简单的中间内容自适应，还可以设置，中间的元素块状元素盒子模型为ie下的盒子模型，

　　　　再使用padding也是可以实现的

<style>
    .box{
        height: 500px;
        background-color: bisque;
        position: relative;
    }
    .box .box-content {
        box-sizing:border-box;
        height: 100%;
        float: left; /* 一定要设置浮动，要不下面的模块上不来 */
        width:100%;/* 一定要设置100%，要不内容不够称不开整个页面 */
        /* 默认还是整行 */
        padding:0 210px;
        } 
    .box .box-content .child {
          /* 中间模块空出左右距离，设置浮动 */
        background-color: blue; 
        height: 100%;
    }
    .box .box-left { 
        width: 200px; float: left; 
        margin-left: -100%; /* 设置浮动， margin-left:-100% 可以使元素往上移一行，并且移动到最左边 */ 
        height: 300px; 
        background-color: green; 
        } 
    .box .box-right { 
        float: left; 
        width: 200px; 
        min-height: 100%; 
        margin-left: -200px;/* 设置浮动， margin-left:负的自身宽度 可以使元素往上移一行，并且移动到最右边 */ 
        background-color: pink; 
        } 
    header,footer { height: 75px; background-color: aqua; } 
</style> 
<body> 
    <header> </header> 
    <div class="box"> 
        <div class="box-content">
            <div class="child"><!-- 这个div只是为了方便看，设置了以下背景色 可用可不用，内容区还是自适应的 -->
                中间主题内容
            </div>
        </div>
        <div class="box-left">
            11dsdasdas不你弟弟呢单独
        </div>
        <div class="box-right">
            12酷酷酷酷酷的的是计算机技术升级的历史记录
        </div> 
    </div>
    <footer>

    </footer>
</body>

　　2，上面其实是圣杯布局，我们再使用中间相对定位，左右两边绝对定位（中间绝对定位，不设置宽度撑不开容器）

　　　　其实只要中间的位子对应了，左右两边不管是相对定位，还是绝对定位都可以

　　　　重点当然还是中间怎么取定位（元素顺序没有关系）

　　　　如果中间取相对定位，不设置浮动，设置margin 空出左右距离，

　　　　两边取绝对定位，只要设置top:0 一个left:0 一个right:0

<!doctype html>
<html lang="en-us">
<head>
    <meta charset="utf-8">
    <title>三列布局</title>
    <style>
    .box{
        height: 500px;
        background-color: bisque;
        position: relative;
        overflow: hidden;
    }
    .box .box-content {
        position: relative;
        height: 100%;
        margin-left: 210px;
        margin-right: 210px;
        background-color: blue;
    } 
    .box .box-left { 
        width: 200px; 
        position: absolute; 
        height: 300px; 
        left: 0;
        top:0;
        background-color: green; 
    } 
    .box .box-right { 
        width: 200px; 
        position: absolute; 
        min-height: 100%; 
        right: 0px;
        top:0;
        background-color: pink; 
    } 
    header,footer { height: 75px; background-color: aqua; } 
</style> 
</head>
<body> 
    <header> </header> 
    <div class="box"> 
        <div class="box-content">
            <div class="child">
                中间主题内容asdasdasdsadsasda嘎达可根但是萨嘎萨嘎据阿里就够了及代理商解放螺
丝钉结案率放假啊了解
            </div>
        </div>
        <div class="box-left">
            11dsdasdas不你弟弟呢单独
        </div>
        <div class="box-right">
            12酷酷酷酷酷的的是计算机技术升级的历史记录
        </div> 
    </div>
    <footer>

    </footer>
</body>
</html>

　　3.我们再看下使用定位的双飞燕布局，双飞燕，要对父容器设置padding ,大小等一左右固定宽度

　　左右两边据对定位，就这个和上面的方法差不多，我们一起看看左右两边相对定位

　　如果左右两边相对定位，设置margin和和left

<!doctype html>
<html lang="en-us">
<head>
    <meta charset="utf-8">
    <title>三列布局</title>
    <style>
    .box{
        height: 500px;
        background-color: bisque;
        position: relative;
        overflow: hidden;
        padding: 0 210px;
    }
    .box .box-content {
        height: 100%;
        float: left;
        background-color: blue;
    } 
    .box .box-left { 
        width: 200px; 
        position: relative; 
        height: 300px; 
        float: left;
        left: -210px;
        margin-left: -100%;
        background-color: green; 
    } 
    .box .box-right { 
        width: 200px; 
        position: relative; 
        min-height: 100%; 
        float: left;
        margin-left: -200px;
        right: -210px;
        background-color: pink; 
    } 
    header,footer { height: 75px; background-color: aqua; } 
</style> 
</head>
<body> 
    <header> </header> 
    <div class="box"> 
        <div class="box-content">
            够了及代理商解放螺丝钉结案率放假啊了解多嘎多gags广东省水水水水水水水水水水
水水顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶
        </div>
        <div class="box-left">
            11dsdasdas不你弟弟呢单独
        </div>
        <div class="box-right">
            12酷酷酷酷酷的的是计算机技术升级的历史记录
        </div> 
    </div>
    <footer>

    </footer>
</body>
</html>

　　4.是用flex实现三列布局，左右固定中间自适应，父元素设置display: flex, 左右分别设置flex: 0 0 200px ，父元素为display:flex

　　　　那么子元素的float、clear和vertical-align属性将失效，兼容性有问题，一般都用于移动端

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>三列布局</title>
    <style>
        .box{
            height: 500px;
            background-color: bisque;
            position: relative;
            display: flex;
        }
        .box .box-content {
            flex: 0 1 auto;
            margin: 0 10px;
            background-color: blue;
        }
        .box .box-left {
            flex: 0 0 200px;
            background-color: green;
        }
        .box .box-right {
            flex: 0 0 200px;
            background-color: pink;
        }
        header,footer {
            height: 75px;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <header>

    </header>
    <div class="box"> 
        <div class="box-left">
            11dsdasdas不你弟弟呢单独
        </div>
        <div class="box-content">
            解斯大林经过拉丝几个垃圾解斯大林经过拉丝几个垃圾解斯大林经过拉丝
　　　　　　　　几个垃圾解斯大林经过拉丝几个垃圾解斯大林经
　　　　　　　　过拉丝几个垃圾解斯大林经过拉丝几个垃圾解斯大林经过拉丝几个垃圾
        </div>
        <div class="box-right">
            12酷酷酷酷酷的的是计算机技术升级的历史记录
        </div> 
    </div>
    <footer>

    </footer>
</body>
</html>

　　5. 使用grid 布局实现三列布局，也是特别简单，设置父元素为，单行，三列，第一列左边宽度，中间自适应，

　　右边自适应，当然grid兼容性很大问题

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>三列布局</title>
    <style>
        .box{
            height: 500px;
            background-color: bisque;
            position: relative;
            display: grid;
            grid-gap: 10px;
            grid-template-columns: 200px auto 200px;
            grid-template-rows: 1fr;
        }
        .box .box-content {
            background-color: blue;
        }
        .box .box-left {
            flex: 0 0 200px;
            background-color: green;
        }
        .box .box-right {
            flex: 0 0 200px;
            background-color: pink;
        }
        header,footer {
            height: 75px;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <header>

    </header>
    <div class="box"> 
        <div class="box-left">
            11dsdasdas不你弟弟呢单独
        </div>
        <div class="box-content">
            解斯大林经过拉丝几个垃圾解斯大林经过拉丝几个垃圾解斯大林经过拉丝几个垃圾解斯大林经过拉丝几个垃圾解斯大林经过拉丝几个垃圾解斯大林经过拉丝几个垃圾解斯大林经过拉丝几个垃圾
        </div>
        <div class="box-right">
            12酷酷酷酷酷的的是计算机技术升级的历史记录
        </div> 
    </div>
    <footer>

    </footer>
</body>
</html>

　　三列布局总结

　　　　1.不使用浮动的圣杯布局，左中右都设置浮动，中间设置宽度100%，嵌套一层div 使其自元素的内容区

　　　　　恰好自适应大小，左边右边设置margin-left:-100% 和margin:-右边宽度，

　　　　　如果不想使用中间嵌套div,则可以设置中间的盒子模型为ie下的盒子模型，然后设置padding的值

　　　　　中间模块一定要放最前面

　　　　2. 使用定位，中间设置margin-left 左边宽度，右边设置margin-right 右边宽度，父元素设置定位

　　　　　position:relative; 左右两边设置position:absolute，绝对定位，设置 top 0 left 0 ,top 0 right 0

　　　　3. 使用定位，中间一样，左右两边设置相对定位，则要设置父元素padding 或者margin 左右宽度

　　　　　然后和1一样设置，左边右边设置margin-left:-100% 和margin:-右边宽度，左边再加上left:-宽度

　　　　　右边设置right:-右边宽度，这个就是经典的双飞翼布局

　　　　4.使用弹性盒子布局，记住中间的一定要设置flex: 0 1 auto ，缩小倍数一定要是1，不是1的话盒子会

　　　　　被子元素字体撑开，一般使用于移动端

　　　　5.使用grid,目前应该有很大兼容性问题，了解就行

您可能感兴趣的文章:

如对本文有疑问，点击进行留言回复！！

CSS 控制动画播放与暂停的小技巧(非常实用)

今天要介绍一种很简单的使用 css 控制动画播放与暂停的小技巧。使用好了，可以在很多实际场景得以运用。我们先来看个例子，本例子是我在闲逛 codepen 时看... [阅读全文]
css3 flex布局实现平均分配元素的示例代码

本文主要介绍了css3 flex布局实现平均分配元素，给自己留个笔记，也分享给大家，具体如下：例子一：<!doctype html><html... [阅读全文]
CSS字体、文本、列表属性详细介绍

1.字体属性　　color，规定文本的颜色，如 div{color:red;}　　font-style，规定文本显示方式，如 p.normal {font-st... [阅读全文]
深入理解CSS background-blend-mode的作用机制

本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。一、可能都知道的首先，讲两点大家可能都知道的知识点：1.background-... [阅读全文]
CSS中的四种定位区别详解

我们都知道，前端开发里面的css中常用的定位方式有普通定位，相对定位，绝对定位、固定定位定位这四种。但是很多零基础的前端小白都不知道这4种定位方式都有什么作用和... [阅读全文]
解决移动端1px边框最好的方法(推荐)

在移动端开发时，经常会遇到在视网膜屏幕中元素边框变粗的问题。本文将带你探讨边框变粗问题的产生原因及介绍目前市面上最好的解决方法。1px 边框问题的由来苹果 ip... [阅读全文]
让CSS flex布局最后一行列表左对齐的N种方法(小结)

引用分享给大家，如果你想进行修改进入链接点到对应的图片生成的链接进入，方可修改。问题描述//html<div class="container&... [阅读全文]
CSS 列表模型之marker标记的使用

本文主要对::master伪元素、list-item下的list-style-image、list-style-type样式属性进行介绍，并介绍了在实际中如何使... [阅读全文]
cubic-bezier处理下拉和回弹

/** * 下拉和回弹 * 1.关闭bounce避免ios端下拉冲突 * 2.由于touchm... [阅读全文]
服装面料加工中英双语网站搭建模板

服装面料定制加工公司中英双语网站搭建模板，首页界面干净高端，服装设计和品牌服饰通用模板，排版整齐干净，使用最新织... [阅读全文]

网友评论


验证码：

css常见的各种布局下----三列布局

2019年04月19日 | 移动技术网IT编程 | 我要评论

您可能感兴趣的文章:

相关文章:

网友评论