您的位置：首页 > 网站优化 > css  >  css+div三栏布局 左右固定宽 中间自适应

css+div三栏布局 左右固定宽 中间自适应

 更新时间：2016年9月14日 14:19  点击：1587
我们经常上网页的时候，如果注意到一些大的网站比如taobao.com等，就会发现他们有三栏布局，中间自动适应，两边固定宽度，同在我们来讲讲实现这种布局的两种方法。

三栏布局，这是一种相对比较常见的页面布局，这里提供2种实现方法：

方法1：

使用最新的css3伸缩盒布局属性，可轻松实现（三栏等高，默认就是三栏等高哟！）

 代码如下 复制代码
<style>
    .header,.footer{height: 100px;line-height: 40px;font-weight: bold;background-color:
    #bbb;text-align: center;} .main{} .content{overflow: hidden;background-color:
    #a4e88c;} .left{width: 100px;background-color: #E79F6D;} .right{width:
    100px;background-color: #7BD;} .left,.right,.content{min-height: 200px;_height:
    200px;} /*伸缩盒布局*/ .flex-container{display: flex;} .content{flex:1;} .left{order:-1;}
</style>
<div class="header">
    页头100px
</div>
<div class="main flex-container">
    <div class="content">
        中间自适应
    </div>
    <div class="left">
        左边宽100px左边宽100px左边宽100px
    </div>
    <div class="right">
        右边宽150px
    </div>
</div>
<div class="footer">
    页脚100px
</div>



提示：你可以先修改部分代码再运行。

方法2：（不考虑三栏加载顺序,中间栏不用额外加层）

主要运用的是触发现代浏览器的BFC和触发旧版ie浏览器的haslayout属性来实现所有浏览器全兼容的中间栏宽度自适应布局的，源码如下：

 代码如下 复制代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    </head>
    <body>
        <style type="text/css">
            *{margin: 0;padding: 0;} body{min-width: 450px;} .fl{float: left;}.fr{float:
            right;} .clear{clear: both;} .clearfix{overflow: hidden;_zoom: 1;} .clearfix:after{display:block;content:
            "";width: 0;height: 0;overflow: hidden;clear: both;} .header{height: 100px;background-color:
            #0080FF;} .main{overflow: hidden;_zoom:1;} .left,.right,.cont{min-height:
            300px;padding-bottom: 9999px;margin-bottom: -9999px;_height: 300px;} /*
            三列等高 */ .left{width: 150px;background-color: #f00;} .right{width: 150px;background-color:
            #008080;} .cont{overflow: hidden;background-color: #900;_zoom:1;} .footer{height:
            100px;background-color: #0080FF;}
        </style>
        <div class="header">
            这是头部
        </div>
        <div class="main">
            <div class="left fl">
                left
            </div>
            <div class="right fr">
                right
            </div>
            <div class="cont">
                cont
                <br />
                触发现代浏览器的BFC和触发旧版ie浏览器的haslayout属性来实现所有浏览器全兼容的中间栏宽度自适应布局：不考虑三栏加载顺序,中间栏不用额外加层
                <br />
                防止.cont被隐藏：body{min-width:2x.left+.right}
            </div>
        </div>
        <div class="footer">
            footer内容
        </div>
    </body>

</html>



提示：你可以先修改部分代码再运行。

方法3：（传说中的圣杯/双飞翼布局,中间自适应栏可优先加载）

主要运用的是浮动float 和margin的结合使用，源码如下：

 代码如下 复制代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    </head>
    <body>
        <style type="text/css">
            *{margin: 0;padding: 0;} body{min-width: 450px;} .fl{float: left;}.fr{float:
            right;} .clear{clear: both;} .clearfix{overflow: hidden;_zoom: 1;} .clearfix:after{display:block;content:
            "";width: 0;height: 0;overflow: hidden;clear: both;} .header{height: 100px;background-color:
            #0080FF;} .main{overflow: hidden;_zoom:1;} .left,.right,.cont_inner{min-height:
            300px;padding-bottom: 9999px;margin-bottom: -9999px;_height: 300px;}/*
            三列等高 */ .cont{width: 100%;} .cont_inner{margin-left: 150px;margin-right:
            150px;background-color: #900;} .left{width: 150px;background-color: #f00;margin-left:
            -100%;} .right{width: 150px;background-color: #008080;margin-left: -150px;}
            .footer{height: 100px;background-color: #0080FF;}
        </style>
        <div class="header">
            这是头部
        </div>
        <div class="main">
            <div class="cont fl">
                <div class="cont_inner">
                    cont
                </div>
            </div>
            <div class="left fl">
                left
            </div>
            <div class="right fr">
                right
            </div>
        </div>
        <div class="footer">
            footer内容
        </div>
    </body>
</html>



提示：你可以先修改部分代码再运行。

从源代码上来看，要不讲究栏目加载顺序，方法1是比较简洁的；但要求自适应栏目优先加载，圣杯布局无疑是首选方案！

另外补充下，圣杯布局是比较灵活的一种布局方式：表现为不改动html结构，只调整css样式，即可实现各种布局，如用下面的任一代码替换上面方法2的对应部分即可实现不同布局：

.cont_inner{margin-right: 300px;background-color: #900;}
    .left{width: 150px;background-color: #f00;margin-left: -300px;}
    .right{width: 150px;float: left;background-color: #008080;margin-left:-150px;}

或

.cont_inner{margin-left: 300px;background-color: #900;}
    .left{width: 150px;background-color: #f00;margin-left: -100%;}
    .right{width: 150px;float: left;background-color: #008080;margin-left:-100%;position: relative;left: 150px;}

其它布局，请自行折腾组合 ^_^

[!--infotagslink--]

相关文章

  • C#窗体布局方式详解

    这篇文章主要介绍了C#窗体布局方式详解的相关资料,需要的朋友可以参考下...2020-06-25

  • Element图表初始大小及窗口自适应实现

    这篇文章主要介绍了Element图表初始大小及窗口自适应实现,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-07-10

  • js中flexible.js实现淘宝弹性布局方案

    这篇文章主要介绍了js中flexible.js实现淘宝弹性布局方案,需要的朋友可以参考下...2015-12-25

  • 从零开始在vue-cli4配置自适应vw布局的实现

    这篇文章主要介绍了从零开始在vue-cli4配置自适应vw布局，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-06-09

  • 在echarts中图例legend和坐标系grid实现左右布局实例

    这篇文章主要介绍了在echarts中图例legend和坐标系grid实现左右布局实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-05-17

  • Flex网页布局基础入门及实例教程

    Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。本教程我们来学习一下Flex布局的基本语法知识及运用实例。 网页布局(layout)是CSS的一...2016-09-14

  • Angular实现form自动布局

    这篇文章主要介绍了Angular实现form自动布局的相关资料，以代码片段的形式分析了Angular实现form自动布局的实现方法，感兴趣的小伙伴们可以参考一下...2016-02-01

  • JavaScript瀑布流布局实现代码

    这篇文章主要为大家详细介绍了JavaScript瀑布流布局的实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2017-05-09

  • echarts使图标能自适应浏览器窗口变化，及经纬度转换

    本文章来为各位一篇关于echarts使图标能自适应浏览器窗口变化，及经纬度转换的例子，希望文章能够帮助到各位同学哦。 1、echarts使图标能自适应浏览器窗口变化 wind...2016-09-20

  • js实现瀑布流布局（无限加载）

    这篇文章主要为大家详细介绍了js实现瀑布流布局，无限加载，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-03-14

  • 解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题

    这篇文章主要介绍了解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-27

  • winform 使用Anchor属性进行界面布局的方法详解

    这篇文章主要介绍了winform 使用Anchor属性进行界面布局的方法，有需要的朋友可以参考一下...2020-06-25

  • 详解HTML5布局和HTML5标签

    这篇文章主要介绍了HTML5布局和HTML5标签的相关知识，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-12-08

  • Android布局之TableLayout-TableRow布局

    本文章来给各位同学详细介绍关于Android布局之TableLayout-TableRow布局,各位同学有需要可进入参考。 代码如下 复制代码 <?xml version="1...2016-09-20

  • java固定大小队列的几种实现方式详解

    队列的特点是节点的排队次序和出队次序按入队时间先后确定,即先入队者先出队,后入队者后出队,这篇文章主要给大家介绍了关于java固定大小队列的几种实现方式,需要的朋友可以参考下...2021-07-15

  • Vue实现大屏页面的屏幕自适应

    这篇文章主要为大家详细介绍了Vue实现大屏页面的屏幕自适应，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-10-22

  • Android抽屉布局DrawerLayout的简单使用

    这篇文章主要为大家详细介绍了Android抽屉布局DrawerLayout的简单使用，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-06-17

  • android开发布局从入门到精通

    本文我们来学习一下android开发入门教程，UI布局从浅入深，android布局分 1.LinearLayout，线性布局方式，2.Relative Layout，相对布局，3.AbsoluteLayout，绝对位置布局等。 A...2016-09-20

  • Android开发之百分比布局库

    本文章为各位介绍一篇关于Android开发之百分比布局库的例子，希望这个例子能够为各位同学带来有效的帮助。 为了解决android手机适配问题，我们经常想如果可以按照百...2016-09-20

  • BootStrap入门教程(一)之可视化布局

    这篇文章主要介绍了bootstrap可视化布局入门教程的相关资料，本文介绍的非常详细，具有参考借鉴价值，感兴趣的朋友一起看看吧...2016-10-03