基本流布局

<!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. o(n)线性排序算法

    O(n) 排序算法 前言 前面有总结过各类常用的排序算法,但是那些排序算法最优的时间复杂度是O(nlogn),所以我要介绍三种时间复杂度为O(n)的线性时间复杂度的排序算法. 计数排序 计数排序利用了 ...

  2. Listener与Filter

    一.监听器Listener javaEE的13们规范中 包括servlet技术和jsp技术 servlet规范中包括三门技术:(servlet的三大组件) servelt技术  Listener技术 ...

  3. Spring+SpringMVC+MyBatis深入学习及搭建(二)——MyBatis原始Dao开发和mapper代理开发

    转载请注明出处:http://www.cnblogs.com/Joanna-Yan/p/6869133.html 前面有写到Spring+SpringMVC+MyBatis深入学习及搭建(一)——My ...

  4. Linux 安装USB摄像头

    sudo apt-get update sudo apt-get install fswebcam sudo apt-get install mplayer sudo apt-get install ...

  5. 从零开始的JS生活（一）——JS简介、变量及基本结构

    本K在经过三个静态站制作的狂风暴雨之后,终于开始了JavaScript的学习.作为一只从来没有正儿八经接受过计算机语言的小白,居然能够跟上浩哥的课程进度,我的内心都被我的才智震惊到了,果然本K是天生丽 ...

  6. 【小练习05】HTML+CSS--淘宝商铺小页面

    要求实现如下效果图: 代码演示 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&g ...

  7. 安迪的第一个字典（Andy's First Dictionary,UVa 10815）

    Description Andy, , has a dream - he wants to produce his very own dictionary. This is not an easy t ...

  8. MQL语句大全

    mysql sql语句大全 1.说明:创建数据库 CREATE DATABASE database-name 2.说明:删除数据库 drop database dbname 3.说明:备份sql se ...

  9. Visual studio常用的code snippets

    作为全球第一的IDE,VS用起来自然相当的爽,当你在visual studio里敲出几个字母,能帮你生成一大段代码,省时省力又能装逼. 比如,你打一个 prop,然后按tab键,就能生成一个带get/ ...

  10. C语言和go语言之间的交互

    一.go代码中使用C代码 go代码中使用C代码,在go语言的函数块中,以注释的方式写入C代码,然后紧跟import "C" 即可在go代码中使用C函数 代码示例: go代码:tes ...