布局
自适应
两列
三列

在传统方法的基础上加入了Flex布局并阐述各方法的优缺点，希望对大家有所帮助。先上目录：

两列布局：左侧定宽，右侧自适应

方法一：利用float和负外边距

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        .main,.sitebar{

            font: bolder 20px/300px;

        }

        .main{

            width: 100%;

            float: left;

        }

        .main .content{

            margin-left: 200px;

            background-color: red;

        }

        .sitebar{

            width: 200px;

            float: left;

            background-color: green;

            margin-left: -100%;

        }

    </style>

</head>

<body>

    <div class="main">

        <div class="content">右侧主体自适应区块</div>

    </div>

    <div class="sitebar">左侧定宽200px区块</div>

</body>

</html>

  • 优点：考虑了页面优化，右侧主内容区先加载，左侧后加载。

  • 缺点：多添加了一层div包裹。

方法二：利用外边距

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        .sitebar{

            float: left;

            width: 200px;

            background-color: green;

        }

        .content{

            background-color: red;

            margin-left: 200px;

        }

    </style>

</head>

<body>

    <div class="sitebar">左侧定宽200px区块</div>

    <div class="content">右侧主体自适应区块</div>

</body>

</html>

  • 优点：代码简洁，便于理解

  • 缺点：不利于页面优化，右侧主内容区后加载

方法三：利用position

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        .sitebar{

            width: 200px;

            background-color: green;

        }

        .content{

            position: absolute;

            left: 200px;

            right: 0;

            top: 0;

            background-color: red;

        }

    </style>

</head>

<body>

    <div class="content">右侧主体自适应区块</div>

    <div class="sitebar">左侧定宽200px区块</div>

</body>

</html>

  • 优点：考虑到了页面优化，右侧内容区先加载

  • 缺点：目测没有

上述三种方法兼容IE7以上，但在IE7下不设置高度时，会产生高度错位bug。可通过设置父元素font-size=0，再分别设置子元素font-size解决。

方法四：利用flex布局

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        .main{

            display: flex;

        }

        .content{

            flex:1;

            background-color: red;

        }

        .sitebar{

            flex:0 0 200px;

            order:-1;

            background-color: green;

        }

</span><span class="hljs-tag" style="color: #cc6666;">&lt;/<span class="hljs-title" style="color: #8abeb7;">style</span>&gt;</span>




</head>


<body>


<div class="main">


<div class="content">右侧主体自适应区块</div>


<div class="sitebar">左侧定宽200px区块</div>


</div>


</body>


</html>

  • 优点：CSS3新布局方式，高大上

  • 缺点：仅支持IE11+。

三列布局：左右定款，中间自适应。

方法一：使用负外边距

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        .main,.left,.right{

            height: 300px;

            font: 20px/300px;

            color: #fff;

            text-align: center;

        }

        .main{

            width: 100%;

            float: left;

        }

        .main .content{

            margin: 0 300px 0 200px;

            background-color: black;

        }

        .left{

            width: 200px;

            float: left;

            margin-left: -100%;

            background-color: red;

        }

        .right{

            width: 300px;

            float: left;

            margin-left: -300px;

            background-color: blue;

        }

    </style>

</head>

<body>

    <div class="main">

        <div class="content">中间主体区域宽度自适应</div>

    </div>

    <div class="left">左侧定宽200px</div>

    <div class="right">右侧定宽300px</div>

</body>

</html>

  • 优点：兼容IE7+，考虑到页面优化，中间内容区先加载

  • 缺点：多一层div嵌套，不易理解

方法二：使用绝对定位

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

<style>

body{

    margin:0px;

}

#left {

    background-color: #E8F5FE;

    border: 1px solid #A9C9E2;

    height: 400px;

    width: 100px;

    position: absolute;

    top: 0px;

    left: 0px;

}

#center {

    background-color: #F2FDDB;

    border: 1px solid #A5CF3D;

    height: 400px;

    margin-right: 102px;

    margin-left: 102px;

}

#right {

    background-color: #FFE7F4;

    border: 1px solid #F9B3D5;

    height: 400px;

    width: 100px;

    position: absolute;

    top: 0px;

    right: 0px;

}

</style>

</head>

<body>


<div id="center">中列</div>


<div id="left">左列</div>


<div id="right">右列</div>


</body>


</html>

  • 优点：代码结构简单，考虑到了页面优化，中间内容去先加载

  • 缺点：目测没有

方法三：使用flex布局

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

<style>

.HolyGrail-body {

  display: flex;

  flex: 1;

}

.HolyGrail-content {

  flex: 1;

  background-color: green;

}

.HolyGrail-nav, .HolyGrail-ads {


/* 两个边栏的宽度设为12em */


flex: 0 0 200px;


background-color: blue;


}

.HolyGrail-nav {


/* 导航放到最左边 */


order: -1;


background-color: grey;


}


</style>


</head>


<body>


<div class="HolyGrail-body">


<main class="HolyGrail-content">...</main>


<nav class="HolyGrail-nav">...</nav>


<aside class="HolyGrail-ads">...</aside>


</div>


</body>


</html>

  • 优点：高大上

  • 缺点：仅支持IE11+

CSS两列及三列自适应布局方法整理的更多相关文章

  1. css实现等高布局 两栏自适应布局 三栏自适应布局

    等高布局: HTML结构如下: <div class="wrapper"> <div class="box"> <h1>.. ...

  2. web标准(复习)--3 二列和三列布局

    今天学习二列和三列布局,将涉及到以下内容和知识点 二列自适应宽度 二列固定宽度 二列固定宽度居中 xhtml的块级元素(div)和内联元素(span) float属性 三列自适应宽度 三列固定宽度 三 ...

  3. 总结CSS面试题目的考察点及常见布局问题整理

    整理网上流传的若干份面试题目,突发奇想,总结关于CSS面试题目的考察点,发现问题大多围绕几个属性和几种题目,水平有限,仅供参考. 写这个博文内心有种莫名奇妙的自我谴责感,实在不应该把面试层叠样式“应试 ...

  4. 使用CSS实现三栏自适应布局（两边宽度固定，中间自适应）

    来源:http://blog.csdn.net/cinderella_hou/article/details/52156333 所谓三列自适应布局指的是两边定宽,中间block宽度自适应.这道题在今年 ...

  5. Web标准：三、二列和三列布局

    知识点: 1.二列自适应宽度 2.二列固定宽度 3.二列固定宽度居中 4.xhtml的块级元素(div)和内联元素(span) 5.float属性 6.三列自适应宽度 7.三列固定宽度 8.三列固定宽 ...

  6. css实现三栏自适应布局（两边固定，中间自适应）以及优缺点

    方法一:绝对定位(absolute + margin) 原理:给左右两边的元素设置absolute,这样左右两边的元素脱离标准文档流的控制,中间的元素自然会上来,然后给中间的元素设置margin留出左 ...

  7. CSS 三栏自适应布局

    CSS布局 这个很基础,方法也很多,要留意的知识点还是有一些. 比如IE6的触发layout  *zoom:1 比如使用浮动后的清除浮动  clear:both 需求的延伸也会有一些: 比如三栏等高 ...

  8. 【HTML+CSS】右侧固定，左侧自适应布局

    <style> *{ padding: 0; margin: 0; } #left{ float: right; width: 100%; height: 300px; } #box{ m ...

  9. css一边固定，另一边自适应的方法

    第一种: 第二种:

随机推荐

  1. poj3393[模拟题]

    Lucky and Good Months by Gregorian Calendar Time Limit: 1000MS   Memory Limit: 65536K Total Submissi ...

  2. union on

    UNION 操作符用于合并两个或多个 SELECT 语句的结果集. 请注意,UNION 内部的 SELECT 语句必须拥有相同数量的列.列也必须拥有相似的数据类型.同时,每条 SELECT 语句中的列 ...

  3. Slickflow.NET 开源工作流引擎基础介绍(一) -- 引擎基本服务接口API介绍

    1. 工作流术语图示                                              图1 流程图形的BPMN图形元素表示 1) 流程模型定义说明流程(Process):是企 ...

  4. java开发：分享一下MemCached的使用

    在项目开发中,有些不经常修改的数据,我们通常都会选择使用缓存.其中一种方式,就是memcached. windows系统中,我们需要下载并安装memcached. 地址如:D:\memcached\m ...

  5. kettle学习-day1-介绍、下载、安装

    QQ群:306059317\ 技术支持:荷露叮咚网络学苑http://www.heludd.com/kettle 下载最新版,获取视频教程 kettle安装: 1).下载需要安装的kettle版本,官 ...

  6. jquery之音乐均衡器

    制作这个音乐均衡器需要一个equalizer插件(插件我已经上传),下面介绍一下网页的BGM的相关属性: hidden="true"表示隐藏播放,即不显示播放器的外观,若要想显示, ...

  7. TSQL基础(三)

    字符处理函数 sql中常见的字符类型有: char(n) --长度固定 不可变 非Unicode 字符数据 n 必须是一个介于 1 和 8,000 之间的数值 nchar(n) --长度固定 不可变 ...

  8. 用命令行将Java程序打包为jar文件

    如何把写好的Java程序打包为jar文件呢?有两种方式可以选择 1.命令行的方式: 打包jar cf JAR文件名称 程序文件名称或者程序所在的文件夹举例:jar cf MyApp.jar D:Jav ...

  9. PHP获取本周第一天和最后一天

    //本周的第一天和最后一天  代码如下 复制代码 $date=new DateTime();$date->modify('this week');$first_day_of_week=$date ...

  10. PHP学习笔记 - 进阶篇（10）

    PHP学习笔记 - 进阶篇(10) 异常处理 抛出一个异常 从PHP5开始,PHP支持异常处理,异常处理是面向对象一个重要特性,PHP代码中的异常通过throw抛出,异常抛出之后,后面的代码将不会再被 ...