首先是index.html文件：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>浮动</title>

   <link href="style2.css" type="text/css" rel="stylesheet">

</head>

<body>

     <div id="container">

     <div id="fd"></div>

     <div id="sd"></div>

     <div id="td"></div>

     <div id="text">hello world</div>

     </div>

</body>

</html>

css：

 #fd{

     width:100px;

     height:150px;

     background-color:red;

     float:left;

 }

 #sd{

     width:150px;

     height:100px;

     background-color:blue;

     float:left;

 }

 #td{

     width:100px;

     height:100px;

     background-color: green;

     float:left;

 }

 #container{

     width:300px;

     height:500px;

     background-color: darkgray;

 }

 #text{

     clear:left;

 }

实现的效果如下：

2、瀑布流效果的实现：

index.html

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="UTF-8">

 <title>浮动的应用</title>

    <link href="style3.css" type="text/css" rel="stylesheet">

 </head>

 <body>

    <div id="div1">

        <ul>

           <li><img src="img.jpg"></li>

           <li><img src="img2.jpg"></li>

           <li><img src="img3.jpg"></li>

        </ul>

        <ul>

           <li><img src="img4.jpg"></li>

           <li><img src="img5.jpg"></li>

           <li><img src="img6.jpg"></li>

        </ul>

        <ul>

           <li><img src="img7.jpg"></li>

           <li><img src="img8.jpg"></li>

           <li><img src="img9.jpg"></li>

        </ul>

    </div>

 </body>

 </html>

css:

 *{

     margin:0px;

     padding:0px;

 }

 li{

     list-style:none;

 }

 #div1{

     width:950px;

     height:auto;/*高度自适应*/

     margin:20px auto; /*前一个参数代表上下，后一个代表左右*/

 }

 ul{

     width: 250px;

     float:left;

 }

实现的效果：

css浮动+应用（瀑布流效果的实现）的更多相关文章

  1. 手把手教你js原生瀑布流效果实现

    手把手教你js原生瀑布流效果实现 什么是瀑布流效果 首先,让我们先看一段动画: 在动画中,我们不难发现,这个动画有以下特点: 1.所有的图片的宽度都是一样的 2.所有的图片的高度是不一样的 3.图片一 ...

  2. css基础之 图片瀑布流布局：用CSS+DIV等宽格子堆砌瀑布流效果 （一）

    <!doctype html> <html> <head> <meta charset="UTF-8"/> <title> ...

  3. 纯 css column 布局实现瀑布流效果

    原理 CSS property: columns.CSS属性 columns 用来设置元素的列宽和列数. 兼容性 chrome 50+ IE 10+ android browser 2.1+ with ...

  4. 用jQuery实现瀑布流效果学习笔记

    jQuery一直没系统的学,只知道是js库,封装了好多js函数,方便了开发.以前做过一个原生的图片网站瀑布流效果,超级麻烦,这次用了jQuery方法,瞬间代码浓缩了,只有56行js代码.神奇的让我来把 ...

  5. web页面和小程序页面实现瀑布流效果

    小程序实现瀑布流效果,和web页面差不多,都要经过以下步骤: 1).加载图片,获取图片的宽高度: 2).根据页面需要显示几列计算每列的宽度: 3).根据图片真实宽度和每列的宽度比,计算出图片需要显示的 ...

  6. js图片瀑布流效果

    要实现图片瀑布流效果,首先得准备几张图片. html的部分比较简单就是将图片加载到浏览器就可以了 代码如下(注意放的图片多一点要不然之后无法滑动鼠标就无法达到瀑布流效果): <!DOCTYPE ...

  7. WPF下制作的简单瀑布流效果

    最近又在搞点小东西,美化界面的时候发现瀑布流效果比较不错.顺便就搬到了WPF,下面是界面 我对WEB前端不熟,JS和CSS怎么实现的,我没去研究过,这里就说下WPF的实现思路,相当简单. 1.最重要的 ...

  8. 利用JS实现简单的瀑布流效果

    哈哈, 我又来啦, 在这一段时间里, 我简单的学习了一下javascript(JS), 虽然不是很懂啦, 但是我也简单的尝试着做了点小东西, 就比如现在流行的瀑布流效果, 经过我的努力终于成功的完成了 ...

  9. 【前端】用jQuery实现瀑布流效果

    jQuery实现瀑布流效果 何为瀑布流: 瀑布流,又称瀑布流式布局.是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部.最早 ...

随机推荐

  1. Java基础知识强化之IO流笔记03：throws的方式处理异常

    1. 什么时候使用throws ? (1)定义功能方法时候,需要把出现的问题暴露出来,让调用者去处理.那么就通过throws在方法上标识. (2)有时候,我们是可以对异常进行处理的,但是又有些时候,我 ...

  2. PYCURL ERROR 22 - "The requested URL returned error: 403 Forbidden"

    RHEL6.5创建本地Yum源后,发现不可用,报错如下: [root@namenode1 html]# yum install gcc Loaded plugins: product-id, refr ...

  3. EasyUi DataGrid 绑定数据格式问题

    如果显示汇总记录则需设置页脚属性:首先设置showFooter:true, 然后后台计算出合计数据,一起传过来,类似如下:{"total":28,"rows": ...

  4. linux的colrm命令

    http://book.51cto.com/art/201107/277853.htm http://book.51cto.com/art/201107/277854.htm

  5. JS判断图片是否加载完成三种方式

    1.img的complete属性 轮询不断监测img的complete属性,如果为true则表明图片已经加载完毕,停止轮询.该属性所有浏览器都支持. <p id="p1"&g ...

  6. Springmvc整合mybatis

    http://blog.csdn.net/geloin/article/details/7536968 http://blog.csdn.net/woshi74/article/details/378 ...

  7. Linux编程基础——GDB（设置断点）（转：TianFang，cnblog： http://www.cnblogs.com/TianFang/archive/2013/01/20/2868889.html）

    启动GDB后,首先就是要设置断点,程序中断后才能调试.在gdb中,断点通常有三种形式: 断点(BreakPoint): 在代码的指定位置中断,这个是我们用得最多的一种.设置断点的命令是break,它通 ...

  8. Python自动化运维之7、生成器、迭代器、列表解析、迭代器表达式

    迭代器和生成器 1.迭代器 迭代器是访问集合元素的一种方式.迭代器对象从集合的第一个元素开始访问,直到所有的元素被访问完结束.迭代器只能往前不会后退,不过这也没什么,因为人们很少在迭代途中往后退.另外 ...

  9. 《python基础教程》笔记之 条件语句和循环语句

    布尔变量 下面的值会被解释器看做假(false): False None 0 "" () {} [] 其它的一切都被解释为真. >>> TrueTrue>& ...

  10. Linq延迟执行

    LINQ中大部分查询运算符都有一个非常重要的特性:延迟执行.这意味着,他们不是在查询创建的时候执行,而是在遍历的时候执行(换句话说,当enumerator的MoveNext方法被调用时).让我们考虑下 ...