基本流布局

<!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. nginx+gridfs+mongodb 配置访问png图片显示无法加载问题

    上传文件后,浏览器中请求:http://<nginx server ip>:<port>/gfs/<my file> 浏览器出现"无法打开页面" ...

  2. Gitlab使用Webhook实现Push代码自动部署

    1.Jenkins 安装完成以后,首先我们在Jenkins中需要安装一下,Gitlab Hook Plugin 插件: 2.插件安装完成我们创建任务,在任务重构建触发器下获取回调URL: 注意: 注意 ...

  3. C#中string，char[]，byte[]互相转换

    string 转换成 Char[] string ss = "我爱你,中国"; char[] cc = ss.ToCharArray(); Char[] 转换成string str ...

  4. Spring MVC 请求处理流程概览

    SpringMVC工作流程 图一:请求流程概述 图二:请求在每个组件的处理 解释Spring工作流程 1.用户向服务器发送请求,请求被spring前端控制Servelt DispatcherServe ...

  5. 字符串和整形数组的相互转化（JAVA程序）

    package te; public class StringConvert { static int[] a = {0,1,1,0,1,1,0,2}; static String s = " ...

  6. 007---Hibernate基本映射标签和属性介绍

    一.映射文件的基本结构举例: <?xml version="1.0"?> <!DOCTYPE hibernate-mapping PUBLIC "-// ...

  7. Segmentation Faul

    转自:http://www.cnblogs.com/panfeng412/archive/2011/11/06/segmentation-fault-in-linux.html

  8. Simulation of empirical Bayesian methods (using baseball statistics)

    Previously in this series: The beta distribution Empirical Bayes estimation Credible intervals The B ...

  9. [rctf](web)rcdn 解题分析，知识点总结

    比赛平台关闭了,没有截图,见谅.   解题思路流程: 分析网站结构,看源码,元素审计.发现以下信息. 要得到flag要获得一个pro cdn pro 子域名长度为3到6个字符 存在一个提交ticke页 ...

  10. Ionic3新特性--页面懒加载1

    Ionic3新的懒加载机制给我带来了如下新特性: 避免在每一个使用到某Page的Module或其他Page中重复的import这个类(需要写一堆路径) 允许我们通过字符串key在任何想使用的地方获取某 ...