基本流布局

<!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. 学习MVC之租房网站（十）-预约和跟单

    在上一篇<学习MVC之租房网站(九)-房源显示和搜索>完成了房源的显示.检索,然后是用户的预约看房,以及后台操作员对预约看房的跟单操作. 预约看房仅有将预约信息保存到对应表的操作,预约表有 ...

  2. mac Ubuntu 设置快捷进入目录

    在我们实际工作中,好多时间需要经常性的进入某个目录查看文件等等之类的操作. 好多时候我们都是在终端一级一级的进入目录,相比较Windows的快捷方式有点繁琐. 废话少说,下面就是设置快捷方式的方法: ...

  3. 模板不存在:./xx 错误位置 FILE: LINE:110 (thinkphp上传至服务器后模板无法解析原因)

    thinkphp上传至服务器后模板无法解析原因 前几日做好的响应式静态页面上传至虚拟空间,打开网址地址出现: 模板不存在:./App/Admin/View/Config/customerService ...

  4. carryLess小笔记001_Java中16进制与字符串之间的相互转换

    笔者前几日在开服过程中需要将字符串转化成为16进制的字符串,在网上找到了一些方法尝试之后,均发现存在一个问题-->字符串转为16进制后再转回来,英文正常,中文出现乱码 经过考虑决定通过以下方式进 ...

  5. PHP编码规范建议学习

    ###php编码规范 -------* sql过长 ```$sql = <<<SQLSELECT delivery_idFROM d_testWHERE delivery_idIN ...

  6. python 集合相关操作

    集合相关操作 集合是一个无序的,不重复的数据组合,它有着两个主要作用:去重以及关系测试. 去重指的是当把一个列表变成了集合,其中重复的内容就自动的被去掉了 关系测试指的是,测试两组数据之间的交集.差集 ...

  7. 百度导航试用 vs 高德导航

    听说百度导航免费了,下载试用了一下: HUD模式不错,但是需要一个手机支架或挂钩.尤其是HUD景象模式,夜间把手机平放,通过前挡风玻璃反射看.这个功能有点乔布斯的感觉了. 不过路径规划还差一点,和凯立 ...

  8. Windows server 2008 r2 开启Aero

    1.右键“计算机”----“管理”----“添加功能”,选上“桌面体验”,一般来说要把服务器系统做成工作 站的话,最好再选上“优质WINDOWS音频视频体验”,如果有无线网卡再选上“无线LAN服务”, ...

  9. 【数据库】Mean web开发 04-MongoDB在Linux上的安装及遇到的问题

    简介 Mean是JavaScript的全栈开发框架.更多介绍 用MongoDB实现持久数据的存储是Mean Web全栈开发中的一部分. MongoDB是一个介于关系数据库和非关系数据库之间的产品,是非 ...

  10. Mac OS X 安装后的简单设置

    让Mac拥有类似apt-get的功能--安装Homebrew Homebrew是一个包管理器,用于在Mac上安装一些OS X没有的UNIX工具(比如著名的wget). 国内下载地址:http://ww ...