中间固定两侧自适应三栏布局

Posted 张宇航

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了中间固定两侧自适应三栏布局相关的知识,希望对你有一定的参考价值。

上一种布局“中间自适应两侧固定” 用了三种方法去解决,这一种是不常见的布局格式,来看下解决方法,先看简单的解决

第一种:绝对定位

技术分享
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    html,body{ height: 100%; padding: 0; margin:0;}
    div{ height: 100%;}
    .main{ width: 500px; background: yellow; position: absolute; top: 0; left: 50%; margin-left: -250px; z-index: 5;}
    .left,.right{ position: absolute; width: 50%; left: 0; z-index: 2; background: black;}
    .right{ position: absolute; width: 50%; right: 0; z-index: 2; background: black;}
    </style>
</head>
<body>
    <div class="left"></div>
    <div class="main"></div>
    <div class="right"></div>
</body>
</html>
技术分享

很easy解决

第二种:浮动

技术分享
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        html,body{ height: 100%; padding: 0; margin: 0;}
        div{ height: 100%;}
        .left,.right{ width: 50%; float: left; margin-left: -250px; background: blue;}
        .main{ width: 500px; float: left; background: yellow;}
        .right .inner,.left .inner{ margin-left: 250px; background: #000; }
    </style>
</head>
<body>
    <div class="left">
        <div class="inner">this is left sidebar content</div>
    </div>
    <div class="main">
    </div>
    <div class="right"> 
        <div class="inner">this is right siderbar content</div>
    </div>
</body>
</html>
技术分享

中间main的 宽度固定后,然后让其做浮动 ,关键地是在左右边栏设置地方,这种方法是将其都进行50%的宽度设置,并加上中负的左边距,再在左右边栏的内层div.inner将其要显示的地方拉回来,就ok了

第三种:css3的flex

技术分享
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex</title>
    <style>
        .grid{
            display:-webkit-box;
              display: -moz-box;
              display: -ms-flexbox;
              display: -webkit-flex;
              display: flex
        }
        .col{ padding: 30px;}
        .fluid{ flex:1; background: #000;}
        .main{ width: 400px; background: yellow;}
    </style>
</head>
<body>
    <div class="grid">
      <div class="col fluid">
      </div>
      <div class="col main">
      </div>
      <div class="col fluid">
      </div>
    </div>
</body>
</html>
技术分享

当然这个牛逼的属性 在浏览器里的支持情况是让人头疼的,下面几个博文准备研究下这个属性

以上是关于中间固定两侧自适应三栏布局的主要内容,如果未能解决你的问题,请参考以下文章

CSS创建三栏布局(两侧宽度固定,中间宽度自适应)的几种方法

CSS创建三栏布局(两侧宽度固定,中间宽度自适应)的几种方法

三栏布局 左右固定 中间自适应

经典三栏布局之圣杯双飞翼弹性布局

CSS三栏布局实现,左右固定,中间自适应

使用‘圣杯布局’‘双飞翼布局’来解释自适应的三栏水平布局