1. #fd {
  2.     width: 100px;
  3.     height: 150px;
  4.     background-color: forestgreen;
  5.     float: left;
  6. }
  7.  
  8. #sd {
  9.     width: 150px;
  10.     height: 100px;
  11.     background-color: coral;
  12.     float: left;
  13. }
  14.  
  15. #td {
  16.     width: 100px;
  17.     height: 100px;
  18.     background-color: chartreuse;
  19.     float: left;
  20. }
  21.  
  22. #container {
  23.     width: 300px;
  24.     height: 500px;
  25.     background-color: beige;
  26. }
  27.  
  28. #text {
  29.     clear: both;
  30.     /*去掉浮动*/
  31. }
  32.  
  33. * {
  34.     margin: 0px;
  35.     padding: 0px;
  36. }
  37.  
  38. li {
  39.     list-style: none;
  40. }
  41.  
  42. #div1 {
  43.     width: 100%;
  44.     height: auto;
  45.     margin: 20px auto;
  46. }
  47. ul{
  48.     width: 250px;
  49.     float: left;
  50. }
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>浮动</title>
  6.     <link rel="stylesheet" href="tzy.css"type="text/css">
  7. </head>
  8. <body>
  9.  
  10. <div id="container">
  11.     <div id="fd">fd</div>
  12.     <div id="sd">sd</div>
  13.     <div id="td">td</div>
  14.     hello word
  15.     helloword
  16.     <div id="text">text</div>
  17. </div>
  18. <!--瀑布流图片大小要一样-->
  19. <div id="div1">
  20.     <ul>
  21.         <li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1505626627&di=b6e93fc3aa32a73602d823fe05af202c&imgtype=jpg&er=1&src=http%3A%2F%2Fimg5.duitang.com%2Fuploads%2Fitem%2F201412%2F30%2F20141230201143_wMJj8.thumb.224_0.jpeg" alt="1"></li>
  22.         <li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1505626627&di=b6e93fc3aa32a73602d823fe05af202c&imgtype=jpg&er=1&src=http%3A%2F%2Fimg5.duitang.com%2Fuploads%2Fitem%2F201412%2F30%2F20141230201143_wMJj8.thumb.224_0.jpeg" alt="2"></li>
  23.         <li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1505626627&di=b6e93fc3aa32a73602d823fe05af202c&imgtype=jpg&er=1&src=http%3A%2F%2Fimg5.duitang.com%2Fuploads%2Fitem%2F201412%2F30%2F20141230201143_wMJj8.thumb.224_0.jpeg" alt="3"></li>
  24.     </ul>
  25.     <ul>
  26.         <li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1505626627&di=b6e93fc3aa32a73602d823fe05af202c&imgtype=jpg&er=1&src=http%3A%2F%2Fimg5.duitang.com%2Fuploads%2Fitem%2F201412%2F30%2F20141230201143_wMJj8.thumb.224_0.jpeg" alt="4"></li>
  27.         <li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1505626627&di=b6e93fc3aa32a73602d823fe05af202c&imgtype=jpg&er=1&src=http%3A%2F%2Fimg5.duitang.com%2Fuploads%2Fitem%2F201412%2F30%2F20141230201143_wMJj8.thumb.224_0.jpeg" alt="5"></li>
  28.         <li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1505626627&di=b6e93fc3aa32a73602d823fe05af202c&imgtype=jpg&er=1&src=http%3A%2F%2Fimg5.duitang.com%2Fuploads%2Fitem%2F201412%2F30%2F20141230201143_wMJj8.thumb.224_0.jpeg" alt="6"></li>
  29.     </ul>
  30.     <ul>
  31.         <li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1505626627&di=b6e93fc3aa32a73602d823fe05af202c&imgtype=jpg&er=1&src=http%3A%2F%2Fimg5.duitang.com%2Fuploads%2Fitem%2F201412%2F30%2F20141230201143_wMJj8.thumb.224_0.jpeg" alt="7"></li>
  32.         <li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1505626627&di=b6e93fc3aa32a73602d823fe05af202c&imgtype=jpg&er=1&src=http%3A%2F%2Fimg5.duitang.com%2Fuploads%2Fitem%2F201412%2F30%2F20141230201143_wMJj8.thumb.224_0.jpeg" alt="8"></li>
  33.         <li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1505626627&di=b6e93fc3aa32a73602d823fe05af202c&imgtype=jpg&er=1&src=http%3A%2F%2Fimg5.duitang.com%2Fuploads%2Fitem%2F201412%2F30%2F20141230201143_wMJj8.thumb.224_0.jpeg" alt="9"></li>
  34.     </ul>
  35. </div>
  36.  
  37. </body>
  38. </html>

HTML学习笔记 css定位浮动及瀑布流案例 第十三节 （原创） 参考使用表的更多相关文章

  1. [CSS3] 学习笔记-CSS定位

    页面的设计需要通过摆放不同的模块在不同的位置,这个时候需要使用到定位和浮动的知识点,CSS3定位功能是很强大的,利用它你可以做出各种各样的网络布局. 1.CSS定位 1)定位机制 普通流:元素按照其在 ...

  2. HTML学习笔记 css定位（静态，相对，固定，绝对布局）偏移案例 第十二节 （原创） 参考使用表

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. amazeui学习笔记--css（布局相关1）--网格Grid

    amazeui学习笔记--css(布局相关1)--网格Grid 一.总结 基本使用 1.div+class布局:amaze里面采取的就是div+class的布局方式  <div class=&q ...

  4. amazeui学习笔记--css（常用组件6）--图标Icon

    amazeui学习笔记--css(常用组件6)--图标Icon 一.总结 1.关注用法即可:在 HTML 上添加添加 am-icon-{图标名称} class. <span class=&quo ...

  5. amazeui学习笔记--css（布局相关3）--辅助类Utility

    amazeui学习笔记--css(布局相关3)--辅助类Utility 一.总结 1.元素清除浮动: 添加 am-cf 这个 class 即可 2.水平滚动: .am-scrollable-horiz ...

  6. Windows phone 8 学习笔记(8) 定位地图导航

    原文:Windows phone 8 学习笔记(8) 定位地图导航 Windows phone 8 已经不使用自家的bing地图,新地图控件可以指定制图模式.视图等.bing地图的定位误差比较大,在模 ...

  7. amazeui学习笔记--css（基本样式4）--打印样式Print

    amazeui学习笔记--css(基本样式3)--打印样式Print 一.总结 1.打印显示url方法: 利用 CSS3 content 属性,将 <a> 和 <abbr> 的 ...

  8. amazeui学习笔记--css（基本样式3）--文字排版Typography

    amazeui学习笔记--css(基本样式3)--文字排版Typography 一.总结 1.字体:amaze默认非 衬线字体(sans-serif) 2.引用块blockquote和定义列表:引用块 ...

  9. amazeui学习笔记--css（基本样式2）--基础设置Base

    amazeui学习笔记--css(基本样式2)--基础设置Base 一.总结 1.盒子模型:外margin,内padding,这里的内外指的边框 2.border-box:Amaze UI 将所有元素 ...

随机推荐

  1. 《effective Go》读后记录

    一个在线的Go编译器 如果还没来得及安装Go环境,想体验一下Go语言,可以在Go在线编译器 上运行Go程序. 格式化 让所有人都遵循一样的编码风格是一种理想,现在Go语言通过gofmt程序,让机器来处 ...

  2. Jest 单元测试入门

    今天,我们要讲的是 Jest 单元测试的入门知识. 为何要进行单元测试? 在学习 Jest 之前,我们需要回答一个问题:为何要进行单元测试?编写单元测试可以给你带来很多好处: 将测试自动化,无需每次都 ...

  3. 基于Quartz实现简单的定时发送邮件

    一.什么是Quartz Quartz 是一个轻量级任务调度框架,只需要做些简单的配置就可以使用:它可以支持持久化的任务存储,即使是任务中断或服务重启后,仍可以继续运行.Quartz既可以做为独立的应用 ...

  4. hdu 4468 spy 极其精彩的一道kmp灵活运用题

    出的超级好的一道题.至于好在哪里,请思考题目: 题意抽象出来为给定一个字符串r,找出它的一个最短后缀s,使得这个r可以被 s的某前缀+s的某前缀+......+s的某前缀+s本身构造出来. 具体题目描 ...

  5. Paint the Grid Again ZOJ - 3780 拓扑

    Paint the Grid Again Time Limit: 2000MS   Memory Limit: 65536KB   64bit IO Format: %lld & %llu [ ...

  6. C# 中函数内定义函数的委托方法

    //定义委托方法Action(无返回值)Func(有返回值) //无返回值委托 Action<string> SetKeyAndValue = delegate(string key) { ...

  7. HDU1789 Doing Homework again

    基础单调队列: #include<cstdio> #include<cstdlib> #include<iostream> #include<algorith ...

  8. bootstrap 响应式导航条模板（含下拉菜单，弹出框）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. Linux基础命令讲解（一）

    Linux命令基本格式: 命令 [参数] [路径文件] 方括号内容可省略 查看命令帮助手段: 1 man 命令名(man 还可以获取配置文件,函数的帮助) 2 命令 --help 3 help 命令( ...

  10. jquery系列教程4-事件操作全解

    点击打开: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件操作全解 jquery系列教程5-动 ...