基本流布局

<!DOCTYPE html >
<html>
<head>
    <meta charset="utf-8">
    <title>基本流布局</title>
    <style type="text/css">
        .header{
            background-color: pink;
            height: 40px;
        }
        .main-body{
            background-color: green;
            height: 500px;
        }
        .footer{
            background-color: grey;
            height: 40px;
        }
        .container{
            width: 700px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="header">
        header
    </div>
    <div class="main-body"></div>
    <div class="footer">
        footer
    </div>
</div>
</body>
</html>

使用float实现混合布局

<!DOCTYPE html >
<html>
<head>
    <meta charset="utf-8">
    <title>Float实现混合多列布局</title>
    <style type="text/css">
        .header{
            background-color: pink;
            height: 40px;
        }
        .main-body{
            background-color: green;
            height: 500px;
            width:100%;
            overflow:hidden;
        }
        .footer{
            background-color: grey;
            height: 40px;
            clear:both; 

        }
        .container{
            width: 700px;
            margin: 0 auto;
        }
        .left{
            background-color: red;
            height: 700px;
            float: left;
            width: 340px;
        }
        .right{
            background-color: orange;
            height: 500px;
            float: right;
            width: 340px;
        }
    </style>
</head>
<body>
    <!--
        消除浮动影响
        1.(一般用于消除对后面的元素影响)clear:both
            参照main-body 子类浮动高度超出了父类

        2.(一般用于消除对父容器的影响)width:100%;overflow:hidden;
            参照（不存在main-body div时）footer right 对footer造成影响
    -->
<div class="container">
    <div class="header">header</div>
    <div class="main-body">
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
    <div class="footer">footer</div>
</div>
</body>
</html>

使用绝对定位实现混合布局

<!DOCTYPE html >
<html>
<head>
    <meta charset="utf-8">
    <title>绝对定位实现混合多列布局</title>
    <style type="text/css">
        .header{
            background-color: pink;
            height: 40px;
        }
        .main-body{
            background-color: green;
            height: 500px;
            position: relative;
            width: 100%;
        }
        .footer{
            background-color: grey;
            height: 40px;
        }
        .container{
            width: 700px;
            margin: 0 auto;
        }
        .left{
            background-color: red;
            height: 500px;
            width: 340px;
        }
        .right{
            background-color: orange;
            position: absolute;
            top: 0px;
            margin-left: 350px;
            word-break: break-word;
        }
    </style>
</head>
<body>
<!--
    1.left 的高度要大于right,负责撑起父容器的高度
    2.right随着内容自动向右填充
    3.容器main-body要设置为相对布局，使right的绝对定位以父容器为标准
-->
<div class="container">
    <div class="header">header</div>
    <div class="main-body">
        <div class="left">left</div>
        <div class="right">
            rightrightrightrightrightrightrightrightrightrightrightrightrightrightright
        </div>
    </div>
    <div class="footer">footer</div>
</div>
</body>
</html>

CSS 实现流布局以及多列混合布局的更多相关文章

  1. css实现多行多列的布局

    1.两列多行: HTML: <div class="box1"> box1:实现两列多行布局 <ul> <li>111</li> & ...

  2. DIV+CSS 网页布局之：混合布局

    1.混合布局 在了解了一列.两列和三列布局之后,混合布局也就不难理解了,混合布局也可以叫综合型布局,那么混合布局就可以在一列布局的基础之上,分为两列布局,三列布局,网页布局的结构普遍都是三列布局,但是 ...

  3. 谈谈一些有趣的CSS题目（六）-- 全兼容的多列均匀布局问题

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  4. 【CSS进阶】伪元素的妙用2 - 多列均匀布局及title属性效果

    最近无论是工作还是自我学习提升都很忙,面对长篇大论的博文总是心有余而力不足,但又不断的接触学习到零碎的但是很有意义的知识点,很想分享给大家,所以本篇可能会很短. 本篇接我另一篇讲述 CSS 伪元素的文 ...

  5. 关于CSS三列Float布局任务

    任务目标 掌握HTML/CSS布局的概念 掌握盒模型的概念 掌握position与float的概念以及在布局时的用法 任务描述 使用 HTML 与 CSS 按照示意图;实现三栏式布局. 左右两栏宽度固 ...

  6. css 两列自适应布局的4种思路

    前面的话 前面已经介绍过css 两列布局中单列定宽单列自适应布局的6种思路的两列布局,而两列自适应布局是指一列由内容撑开,另一列撑满剩余宽度的布局方式.本文将从float.table.flex和gri ...

  7. 慕课笔记利用css进行布局【混合布局】

    <html> <head> <title>混合布局学习</title> <style type="text/css"> ...

  8. 使用em为单位制作两列弹性布局

    一.DIV布局按照定位的方法分为:浮动方法(float),坐标定位方法(position),还有就是两者相结合的方法. 二.DIV布局按照定义单位的不同可分为:固定宽度布局.流体布局.弹性布局和混合布 ...

  9. ul和li实现分两列（多列）布局显示

    简单语句实现DIV+CSS分两列(多列)布局显示 <style type="text/css"> .my ul { width: 210px; } .my li { w ...

随机推荐

  1. Git Flow Note

    近期困惑于Git代码版本控制,集中两天时间研究,其中基础知识来源于<Git权威指南>,分支思想则来源于一篇博文<A successful Git branching model> ...

  2. Github 开源：升讯威 Winform 开源控件库（ Sheng.Winform.Controls）

    Github 地址:https://github.com/iccb1013/Sheng.Winform.Controls 本控件库中的代码大约写于10年前(2007年左右),难免有不成熟与欠考虑之处, ...

  3. 什么是ZigBee、Wifi无线技术？有什么优势？

    Zigbee:是基于IEEE802.15.4标准的低功耗个域网协议.根据这个协议规定的技术是一种短距离.低功耗的无线通信技术.这一名称来源于蜜蜂的八字舞,由于蜜蜂(bee)是靠飞翔和"嗡嗡& ...

  4. C#控制台或应用程序中两个多个Main()方法的可行性方案

    大多数初级程序员或学生都认为在C#控制台或应用程序中只能有一个Main()方法.但是事实上是可以有多个Main()方法的. 在C#控制台或应用程序中,在多个类中,且每个类里最多只能存在一个Main() ...

  5. CocoaPods 安装使用教程

    CocoaPods 是比较好的第三方类库管理工具.可通过 terminal 命令进行第三方类库的安装,非常方便. 安装: Mac terminal 输入:gem install cocoapods 若 ...

  6. CCNA毕业测试

    要求: 1:不同楼层物理隔离,但逻辑相连 2:相同楼层物理相连,但逻辑隔离 3:主机可以动态获取IP地址 4:不同VLAN间可以进行通信 5:主机最终访问www.baidu.com弹出Congratu ...

  7. 简易-五星评分-jQuery纯手写

    超级简单的评分功能,分为四个步骤轻松搞定: 第一步: 引入jquery文件:这里我用百度CDN的jquery: <script src="http://apps.bdimg.com/l ...

  8. leetcode算法题（JavaScript实现）

    题外话 刷了一段时间的codewars的JavaScript题目之后,它给我最大的感受就是,会帮助你迅速的提升你希望练习的语言的API的熟悉程度,Array对象.String对象等原生方法,构造函数. ...

  9. HTML面试题

    1.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? 所谓的“浏览器内核”无非指的是一个浏览器最核心的部分-“Rendering Engine”,直译叫做“渲染引擎”,我们也常称为“排版引擎 ...

  10. 本地修改js代码并时时生效的解决办法

    js作为客户端语言(当然它也可以作服务端语言),非常强悍,一般情况下,我们都是在开发阶段不停的改,然后上线之后就作为稳定运行的代码. 然而有时候可能因为js写得有问题,导致上线后,某些功能无法使用,这 ...