首页 > > 网页制作 > css >

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

2019-04-20 08:53:39来源：博客园 阅读 ()

新老客户大回馈,云服务器低至5折

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>
View Code

　　 三列布局总结

　　　　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,目前应该有很大兼容性问题，了解就行

　　　　


原文链接:https://www.cnblogs.com/czkolve/p/10725926.html
如有疑问请与原作者联系

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

上一篇：浏览器渲染页面流程

下一篇：easyui表格自动换行

相关文章

IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设

网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源

网站联盟： 联盟新闻 联盟介绍 联盟点评 网赚技巧

行业资讯： 搜索引擎 网络游戏 电子商务 广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护

软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识： 网络协议 网络安全 网络管理 组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条
最新资讯
热门关注
热门标签