<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>浮动布局</title>

        <style type="text/css">

        *{

            margin: 0;

            padding: 0;

        }

            header{

                height: 150px;

                background: yellow;

            }

            nav{

                height: 30px;

                background: green;

            }

            .main{

                width: 1000px;

                background: red;

                /*height: 500px;*/

                margin: 0 auto;

                overflow: hidden;

            }

            /*两列/三列布局*/

            .left{

                width: 200px;

                height: 300px;

                background: blue;

                /*display: inline-block;*/

                float:left; /*脱离文档流 的布局方式*/

            }

            .right{

                width: 800px;

                height: 500px;

                background: pink;

                float: left;

                /*display: inline-block;

                vertical-align: top;*/

            }

            footer{

                height: 100px;

                background: gold;

            }

            /*多行多列布局*/

            .box{

                width: 240px;

                height: 100px;

                border: 1px black solid;

                float: left;

                margin: 10px;

                /*box-sizing: border-box;*/

            }

        </style>

    </head>

    <body>

        <header></header>

        <nav></nav>

        <div class="main">

            <div class="left"></div>

            <div class="right">

                <div class="content">

                    <div class="box"></div>

                    <div class="box"></div>

                    <div class="box"></div>

                    <div class="box"></div>

                    <div class="box"></div>

                    <div class="box"></div>

                </div>

            </div>

        </div>

        <footer></footer>

    </body>

</html>

浮动布局demo的更多相关文章

  1. IOS自己主动布局中的浮动布局(6)----MyFloatLayout横空出世

    https://github.com/youngsoft/MyLinearLayout 前言 在MyLayout的6大布局中,每种布局都有不同的应用场景. 且每种布局的子视图的约束机制不一样:线性布局 ...

  2. jQuery-瀑布流-浮动布局（一

    jQuery-瀑布流-浮动布局(一)(延迟AJAX加载图片)   瀑布流:这种布局适合于小数据块,每个数据块内容相近且没有侧重.通常,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部 ...

  3. 拜拜了,浮动布局-基于display:inline-block的列表布局——张鑫旭

    一.一抹前言 没有爱的日子,时间如指尖细沙,不知不觉就流逝了.写“CSS float浮动的深入研究.详解及拓展(一)”和“CSS float浮动的深入研究.详解及拓展(二)”似乎就在不久前,然而相隔差 ...

  4. 前端开发：css基础知识之盒模型以及浮动布局。

    前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西?  为什么这个浮动没有效果?  这个问题楼主已经回答了n遍.今天则是把 ...

  5. CSS浮动布局与菜单栏设计

    公司周六停电,终于可以双休了.用周五空余时间再夯实一下css基础,<CSS权威指南>概念性的内容看起来容易犯困,不如实践来得快,动手操作吧. 一.浮动布局 浮动存在问题:浮动使元素脱离文档 ...

  6. jqm的多列布局demo,html5的多列布局demo,多列布局的具体解说,html5开发实例具体解释

    因为移动设备屏幕宽度较小,所以一般不建议使用多列布局.但有时你可能须要并排放置一些元素(如button之类的). jQuery Mobile通过约定的类名ui-grid来提供了一种基于css的多列布局 ...

  7. css浮动布局

    上次我们一起对盒子模型进行了一定的了解,今天我们就对css浮动布局做一下研究.首先我们来了解一下网页基本布局的三种形式. 首先我们来了解一下什么是网页布局: 网页的布局方式其实就是指浏览器是如何对网页 ...

  8. css浮动布局，浮动原理，清除(闭合)浮动方法

    css浮动 1.什么是浮动:在我们布局的时用到的一种技术,能够方便我们进行布局,通过让元素浮动,我们可以使元素在水平上左右移动,再通过margin属性调整位置 2.浮动的原理:使当前元素脱离普通流,相 ...

  9. CSS---光标cursor设置、浮动布局与clear的关系

    光标设置 {cursor:auto;}--光标根据需要自动变化. {cursor:crosshair;}--光标变成“+”. {cursor:pointer;}--光标变成手指模式. {cursor: ...

随机推荐

  1. TextView设置成仅仅读

    TextView设置成仅仅读 方法一:代理 - (BOOL)textViewShouldBeginEditing:(UITextView *)textView { return NO; } 方法二:设 ...

  2. Hadoop HDFS NFS GateWay部署深入具体解释

    目的:通过挂载的方式,能够相似訪问本地磁盘的方式一样的訪问Hadoop文件.简单.方便.快捷. 0.系统版本号&hadoop版本号 1)系统版本号 [root@WEB-W031 sbin]# ...

  3. react新特性 react hooks

    本文介绍的是react新特性react hooks,本文面向的是有一定react开发经验的小伙伴,如果你对react还不是很熟悉的话我建议你先学习react并多多联系. 首先我们都知道react有3种 ...

  4. NSoup解析处理Html

    以前在做网页静态生成的时候,使用正则表达式分析提取网页链接.最近搜索了解到java有个Jsoup解析网页,对应.net有个nsoup.处理网页非常好用. Document doc = NSoupCli ...

  5. Hihocoder #1479 : 三等分 树形DP

    三等分  描述 小Hi最近参加了一场比赛,这场比赛中小Hi被要求将一棵树拆成3份,使得每一份中所有节点的权值和相等. 比赛结束后,小Hi发现虽然大家得到的树几乎一模一样,但是每个人的方法都有所不同.于 ...

  6. 关于spring配置文件中编辑时没有提示信息的问题

    spring配置文件头部信息主要是提供一个xml的编写规范作用. 新创建的配置文件引入头部信息后,编辑时没有提示信息,重启elipse即可解决.

  7. Robot Framework 初学者上手资料

    首先要声明一下这是从http://www.cnblogs.com/yufeihlf/p/5949984.html拷贝的. 在这里只是自己的一个笔记,方便日后添加.修改内容. 总结下Robot Fram ...

  8. Bing Maps进阶系列九：使用MapCruncher进行地图切片并集成进Bing Maps

    Bing Maps进阶系列九:使用MapCruncher进行地图切片并集成进Bing Maps 在Bing Maps开发中,由于各种应用功能的不同,更多的时候用户可能需要将自己的一部分图片数据作为地图 ...

  9. 【POI 2010】 Pilots

    [题目链接] 点击打开链接 [算法] 单调队列 [代码] #include<bits/stdc++.h> using namespace std; #define MAXN 3000010 ...

  10. 从EJB规范理解微服务

    晚上看了一篇从JavaEE谈微服务的文章,里面不少观点还是很有启发的,下面最有感触的,从失败的EJB谈微服务. 说起JavaEE规范,要先从EJB(Enterprise Java Bean),他是一种 ...