基本流布局

<!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. Ajax，纯Js+Jquery

    AJAX:Asynchronous Javascript and xml 异步,Js和Xml 交互式网页开发 不刷新页面,与服务器交互 详情请参照Jquery工具指南用在浏览器端的技术,无刷新,通过X ...

  2. GO的初始简书（一）简介安装

    已经玩了很长一段时间的golang了,做个gopher,下面我将逐步展示各种go语言的开发,从入门开始哦,完全是凭着自己学习和实践的结果展示,如果有说的不对的,请指正. 简介 go语言是由Google ...

  3. Oracle 只导出某个用户下的表及数据

    今天某大牛问我要之前我参与的一个系统的代码及库,我捣鼓下,发给了他. 他很诧异的问:这个库有这么大么 我说 因为当时是专门新建了一个实例,用户也是系统用户,所以导出的时候是导出的整个数据库 他 ZZ ...

  4. Python爬虫02——贴吧图片爬虫V2.0

    Python小爬虫——贴吧图片爬虫V2.0 贴吧图片爬虫进阶:在上次的第一个小爬虫过后,用了几次发现每爬一个帖子,都要自己手动输入帖子链接,WTF这程序简直反人类!不行了不行了得改进改进. 思路: 贴 ...

  5. 百度前端技术学院—-小薇学院(HTML+CSS课程任务)

    任务一:零基础HTML编码 课程概述 作业提交截止时间:04-24 重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合理 ...

  6. haproxy-代码阅读-内存管理

    haproxy内存池概述 内存池按照类型分类,每个类型的内存池都有一个名字,用链表记录空闲的内存块,每个内存块大小相等,并按照16字节对齐. haporxy用pool_head 结构记录内存池 str ...

  7. iOS 原生模块 给 Javascript(ReactNative) 发送事件 (通知监听)

    官方中文文档是这样描述的:   就给我们这几句话 就打发我们了. 按照上面的写法,根本不知道  - (void)calendarEventReminderReceived:(NSNotificatio ...

  8. Mac苹果系统 多系统启动：The rEFInd Boot Manager

    苹果系统 多系统启动 下载安装REFIT: 首先安装一下:REFIT, 在这个页面下载: http://refit.sourceforge.net/#download 选择mac disk image ...

  9. (转) Java RMI 框架（远程方法调用）

    "原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://haolloyin.blog.51cto.com/1177454/33 ...

  10. 深入理解循环队列----循环数组实现ArrayDeque

    我们知道队列这种数据结构的物理实现方式主要还是两种,一种是链队列(自定义节点类),另一种则是使用数组实现,两者各有优势.此处我们将要介绍的循环队列其实是队列的一种具体实现,由于一般的数组实现的队列结构 ...