三栏布局，顾名思义就是两边固定，中间自适应。三栏布局在开发十分常见，那么什么是三栏布局？例如当当网首页边商品导航和右边导航固定宽度，中间的主要内容随浏览器宽度自适应。效果如下图所示：

　　

　　下面围绕的这样的目的，即左右模块固定宽度，中间模块随浏览器变化自适应，想要完成的最终结果如下图：

　　红色和蓝色宽度固定，绿色宽度自适应，下面七种方法实现的最终效果跟这个差不多，可能会稍有不同。

　　方法一：流体布局（左右模块各自向左右浮动，并设置中间模块的 margin 值使中间模块宽度自适应。缺点就是主要内容无法最先加载，当页面内容较多时会影响用户体验。）

<!DOCTYPE html>

　　　　　　　　　　　　　　　<html lang="en">

<head>

<style>

.left {

float: left;

height: 200px;

width: 100px;

}

.right {

width: 200px;

height: 200px;

background-color: blue;

float: right;

}

.main {

margin-left: 120px;

margin-right: 220px;

height: 200px;

background-color: green;

}

</style>

</head>

<body>

<div class="container">

<div class="left">left</div>

<div class="right">right</div>

<div class="main">mian</div>

</div>

</body>

</html>

　　方法二：BFC三栏布局（缺点跟方法一类似，主要内容模块无法最先加载，当页面中内容较多时会影响用户体验。）

<!DOCTYPE html>

<html lang="en">

<head>

    <style>

	.left {

	    float: left;

	    height: 200px;

	    width: 100px;

	    margin-right: 20px;

	    background-color: red;

	}

	.right {

	    width: 200px;

	    height: 200px;

	    float: right;

	    margin-left: 20px;

	    background-color: blue;

	}

	.main {

	    height: 200px;

	    overflow: hidden;

	    background-color: green;

	}

    </style>

</head>

<body>

    <div class="container">

        <div class="left"></div>

        <div class="right"></div>

        <div class="main"></div>

    </div>

</body>

</html>

　　方法三：双飞翼布局（利用的是浮动元素 margin 负值的应用。主体内容可以优先加载，HTML 代码结构稍微复杂点。）

　　　

<!DOCTYPE html>
<html lang="en">
<head>
<style>
.content {
   float: left;
   width: 100%;
}
.main {
   height: 200px;
   margin-left: 110px;
   margin-right: 220px;
  
}
    .left {
     float: left;
     height: 200px;
     width: 100px;
     margin-left: -100%;
     background-color: red;
    }
    .right {
     width: 200px;
     height: 200px;
     float: right;
     margin-left: -200px;
     background-color: blue;
    }   
</style>
</head>
<body>
<div class="content">
<div class="main"></div>
</div>
<div class="left"></div>
<div class="right"></div>
</body>
</html>
　　　方法四：圣杯布局（跟双飞翼布局很像，有一些细节上的区别，相对于双飞翼布局来说，HTML 结构相对简单，但是样式定义就稍微复杂，也是优先加载内容主体。）
 
<!DOCTYPE html>
<html lang="en">
<head>
<style>
    .container {
     margin-left: 120px;
     margin-right: 220px;
    }
    .main {
     float: left;
     width: 100%;
     height: 300px;
    
    }
    .left {
     float: left;
     width: 100px;
     height: 300px;
     margin-left: -100%;
     position: relative;
     left: -120px;
     background-color: blue;
    }
    .right {
     float: left;
     width: 200px;
     height: 300px;
     margin-left: -200px;
     position: relative;
     right: -220px;
     background-color: green;
    }
</style>
</head>
<body>
<div class="container">
    <div class="main"></div>
    <div class="left"></div>
    <div class="right"></div>
</div>
</body>
</html>
　　方法五：flex布局（简单实用，未来的趋势，需要考虑浏览器的兼容性。）
　　　　　　

<!DOCTYPE html>
<html lang="en">
<head>
<style>
    .container {
display: flex;
    }
    .main {
flex-grow: 1;
     height: 300px;
    
    }
    .left {
     order: -1;
     flex: 0 1 200px;
     margin-right: 20px;
     height: 300px;
     background-color: blue;
    }
    .right {
     flex: 0 1 100px;
margin-left: 20px;
     height: 300px;
     background-color: green;
    }
</style>
</head>
<body>
<div class="container">
    <div class="main"></div>
    <div class="left"></div>
    <div class="right"></div>
</div>
</body>
</html>
 
 
　　　方法六：table布局（缺点：无法设置栏间距）
　　　　

<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container {
     display: table;
     width: 100%;
}
.left, .main, .right {
     display: table-cell;
}
.left {
     width: 200px;
     height: 300px;
    
}
.main {
     background-color: blue;
}
.right {
     width: 100px;
     height: 300px;
     background-color: green;
}
</style>
</head>
<body>
<div class="container">
    <div class="left"></div>
    <div class="main"></div>
    <div class="right"></div>
</div>
</body>
</html>

　　　　

　　方法七：绝对定位布局（简单实用，并且主要内容可以优先加载。）
　　　　

<!DOCTYPE html>
<html lang="en">
<head>
<style>
    .container {
     position: relative;
    }
    .main {
     height: 400px;
     margin: 0 120px;
    
    }
    .left {
     position: absolute;
     width: 100px;
     height: 300px;
     left: 0;
     top: 0;
     background-color: red;
    }
    .right {
     position: absolute;
     width: 100px;
     height: 300px;
     background-color: blue;
right: 0;
     top: 0;
    }
</style>
</head>
<body>
<div class="container">
<div class="main"></div>
    <div class="left"></div>
    <div class="right"></div>
</div>
</body>
</html>
 
 
 

css中常用的七种三栏布局技巧总结的更多相关文章

  1. 详解 CSS 七种三栏布局技巧

    作者:林东洲 链接:https://zhuanlan.zhihu.com/p/25070186 来源:知乎 著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 三栏布局,顾名思义就是 ...

  2. css中常用的几种居中方法

    在前端面试中,大都会问你div居中的方法: 文笔不好,就随便寥寥几句话概括了, 不过以后文笔肯定会变得更好一些的. 今天我们就细数一下几种方法: 1,使用position:absolute,设置lef ...

  3. 三种方法实现CSS三栏布局

    本文由云+社区发表 作者:前端林子 本文会分别介绍三种CSS实现三栏布局的方法,可在浏览器中打开查看效果 1.方法一:自身浮动的方法 实现方法:需要左栏向左浮动,右栏向右浮动,中间设左右margin来 ...

  4. css中，在高度已知，写出三栏布局，其中左栏、右栏宽度各位300px，中间自适应

    解决方案主要有五种 首先写入全局样式 <style type="text/css"> html * { margin: ; padding: ; } .layout { ...

  5. CSS实现三栏布局(5种)

    常见的布局方式: float布局.Position定位.table布局.弹性(flex)布局.网格(grid)布局 那么我们就是用以上5种方式完成三栏布局,不过前提是左右宽度(假如左右宽度为300px ...

  6. Css三栏布局自适应实现几种方法

    Css三栏布局自适应实现几种方法 自适应实现方法我们可以从三个方法来做,一个是绝对定位 ,自身浮动法 和margin负值法了,下面我们一起来看看这三个例子吧,希望例子能帮助到各位同学. 绝对定位法三栏 ...

  7. CSS三栏布局的四种方法

    总括: 不管是三栏布局还是两栏布局都是我们在平时项目里经常使用的,也许你不知道什么事三栏布局什么是两栏布局但实际已经在用,或许你知道三栏布局的一种或两种方法,但实际操作中也只会依赖那某一种方法,本文具 ...

  8. CSS系列，三栏布局的四种方法

    三栏布局.两栏布局都是我们在平时项目里经常使用的,今天我们来玩一下三栏布局的四种写法,以及它的使用场景. 所谓三栏布局就是指页面分为左中右三部分然后对中间一部分做自适应的一种布局方式. 1.绝对定位法 ...

  9. css 实现三栏布局的四种方式

    三栏布局就是左中右,左右两边固定,中间自适应. 1. 绝对定位 <div class="left">左边</div> <div class=" ...

随机推荐

  1. emlog通过pjax实现无刷新加载网页--完美解决cnzz统计和javascript失效问题

    想要更详细了解pjax,需要查看官网 或者看本站文章:jQuery.pjax.js:使用AJAX和pushState无刷新加载网页(官网教程中文翻译) 效果看本站,音乐无刷新播放,代码高亮和复制js加 ...

  2. Typeclassopedia

    https://wiki.haskell.org/wikiupload/8/85/TMR-Issue13.pdf By Brent Yorgey, byorgey@gmail.com Original ...

  3. mui switch 开关js控制打开 & Cannot read property 'toggle' of null

    //打开开关 mui('#mySwitch').switch().toggle(); //小开关打开异常的情况解决办法$(".mui-switch-handle").attr(&q ...

  4. python核心编程中的对象值比较VS对象身份比较(转载)

    转载地址: https://blog.csdn.net/Mluka/article/details/51076786 在python核心编程第四章中,P69在优化下面这段代码时提出了:对象值比较VS对 ...

  5. MySQL NULL 值如何处理？

    我们已经知道 MySQL 使用 SQL SELECT 命令及 WHERE 子句来读取数据表中的数据,但是当提供的查询条件字段为 NULL 时,该命令可能就无法正常工作. 为了处理这种情况,MySQL提 ...

  6. BZOJ 3943: [Usaco2015 Feb]SuperBull 最小生成树

    Code: // luogu-judger-enable-o2 #include<bits/stdc++.h> #define setIO(s) freopen(s".in&qu ...

  7. BZOJ 4712: 洪水 挖坑待补

    Code: #include<bits/stdc++.h> #define setIO(s) freopen(s".in","r",stdin) # ...

  8. ActionChains定位元素

    ActionChains UI自动化测试过程中,经常遇到那种,需要鼠标悬浮后,要操作的才会元素出现的这种场景,那么我们就要模拟鼠标悬浮到某一个位置,做一系列的连贯操作,Selenium给我们提供了Ac ...

  9. hdu 3001（三进制状压）

    题目 解法 看到这道题,我们就会想到旅行商问题.但是这里每一个点可以经过最多两次,所以我们用三进制表示就好了. 代码 #include <iostream> #include <cs ...

  10. [bzoj4766] 文艺计算姬 (矩阵树定理+二分图)

    传送门 Description "奋战三星期,造台计算机".小W响应号召,花了三星期造了台文艺计算姬.文艺计算姬比普通计算机有更多的艺 术细胞.普通计算机能计算一个带标号完全图的生 ...