请珍惜小编劳动成果，该文章为小编原创，转载请注明出处。

觉得腾讯微博微频道里的那种布局方式很好，在这里利用CSS3简单的实现了一下。

先上一张效果图：

代码：

pubu.css

/* CSS Document */

.container{

width:60%;

margin-left:20%;

margin-right:20%;

background:#61A5D1;

float:right;

/*盒子*/

-webkit-column-width:160px;

-moz-column-width:160px;

-o-colum-width:160px;

-webkit-column-gap:1px;

-moz-column-gap:1px;

-o-column-gap:1px;

}

.box{

-webkit-border-radius:5px;

-moz-border-radius:5px;

border-radius:5px;

background:#D9D9D9;

border::#CCC 1px solid;

display:inline-block;

width:180px;    /*当把大小调成200，就会左右重合，不知道是什么问题*/

position:relative;

margin:5px;

}

pubu.html:

<!DOCTYPE>

<html>

<head>

<meta charset="utf-8">

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

<title>CSS3瀑布布局</title>

</head>

<body>

<div class="container">    <!--经过试验，这里只能写成class="container“，如果写成id="container"会变成底部对齐-->

  <div  class="box"><img src="image/1.jpg" width="180px" />别小看我，我绝对不会放弃。我接受考试，就算一生只能当下忍，我也会成为火影给你们看的，没什么了不起的。——漩涡鸣人。（明天高考，做一个永远追梦的人）#火影忍者#</div>

  <div  class="box"><img src="image/2.jpg" width="180px" />我们依然坚强战胜每一次挫折,只是因为我们还活着.#火影忍者#</div>

   <div  class="box"><img src="image/3.jpg" width="180px" />你只看到我在不停的忙碌，却没看到我奋斗的热情。你有朝九晚五，我有通宵达旦。你否定我的现在，我决定我的未来。你可以轻视我的存在，我会用代码证明这是谁的时代！梦想是注定孤独的旅行，路上少不了质疑和嘲笑，但那又怎么样 。哪怕遍体鳞伤 也要coding。我是java程序员 我为自己代言！</div>

  <div style="height:150px" class="box"></div>

  <div style="height:320px" class="box"></div>

  <div style="height:340px" class="box"></div>

  <div style="height:220px" class="box"></div>

  <div style="height:270px" class="box"></div>

  <div style="height:220px" class="box"></div>

  <div style="height:220px" class="box"></div>

</div>

</body>

</html>

在这里只是简单的实现了一下，其中也存在一些问题没解决，而且不是很好看，大家可以自己美化一下。

版权声明：本文为博主原创文章，未经博主允许不得转载。

玩转CSS3(二)---CSS3实现瀑布布局的更多相关文章

  1. 玩转CSS3(一)----CSS3实现页面布局

    请珍惜小编劳动成果,该文章为小编原创,转载请注明出处. 摘要:     CSS3相对CSS2增加了一些新的布局方式:多栏布局和盒子布局.在这篇文章中,将对CSS2的布局进行简单的回忆,并总结CSS3的 ...

  2. [转]CSS3 Media Query实现响应布局

    讲到响应式布局, 相信大家都有一定的了解,响应式布局是今年很流行的一个设计理念,随着移动互联网的盛行,为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果, 设计师提出了响应式布局的设计方案.今 ...

  3. CSS3的学习--实现瀑布流

    基于CSS3实现瀑布流,使用CSS3的CSS 多栏(Multi-column). 可以到github上下载源码 : https://github.com/CraryPrimitiveMan/water ...

  4. 第九十二节，html5+css3移动手机端流体布局，开篇知识

    html5+css3移动手机端流体布局,开篇知识 将项目设计成移动端可访问的页面,项目采用的是流体布局.也就是宽度以百分比自适应的,因为手机的屏幕大小不一致  一．整体设计     首先 我们要了解一 ...

  5. 解决CSS3多列样式column-width布局时内容被截断、错乱

    一.问题 使用CSS3的column-width: auto | <length>属性时,出现排列的内容被截断,出现错位的现象. 二.原因 需要为图片容器设置高度,不然会崩掉. 三.解决方 ...

  6. CSS3弹性盒模型flexbox布局基础版

    原文链接:http://caibaojian.com/using-flexbox.html 最近看了社区上的一些关于flexbox的很多文章,感觉都没有我这篇文章实在,最重要的兼容性问题好多人都没有提 ...

  7. 第九十四节，html5+css3移动手机端流体布局，旅游部分，媒体查询

    html5+css3移动手机端流体布局,旅游部分,媒体查询 媒体查询 媒体查询是手机网站和自适应网站的重要部分,媒体查询可以根据不同的屏幕大小,做响应的处理,如文字的大小,区块隐藏等等 媒体查询,这里 ...

  8. 第九十三节，html5+css3移动手机端流体布局，基础CSS,头部设计,轮播设计,底部设计

    html5+css3移动手机端流体布局,基础CSS,头部设计,轮播设计,底部设计 基础CSS 首先将通用css属性写好 @charset "utf-8"; /*通用样式*/ /*去 ...

  9. CSS3全览_最新布局

    CSS3全览_最新布局 目录 CSS3全览_最新布局 1. 浮动及其形状 2. 定位 3. 弹性盒布局 4. 栅格布局 5. 表格布局 作者: https://www.cnblogs.com/xiax ...

随机推荐

  1. leetcode之旅（7）-Move Zeroes

    Move Zeroes 题目描述: Given an array nums, write a function to move all 0's to the end of it while maint ...

  2. 视频博文结合的教程：用nodejs实现简单的爬虫

    教学视频地址: https://v.qq.com/x/page/b0643tut4ze.html 前言   本喵最近工作中需要使用node,并也想晋升为全栈工程师,所以开始了node学习之旅,在学习过 ...

  3. HashMap实现原理及源码分析（JDK1.7）

    转载:https://www.cnblogs.com/chengxiao/p/6059914.html 哈希表(hash table)也叫散列表,是一种非常重要的数据结构,应用场景及其丰富,许多缓存技 ...

  4. java 如何使的float保留2位或者多位小数 （转载）

    转载自 http://blog.csdn.net/com_stu_zhang/article/details/7214565 方法1: float   f   =  34.232323;    Big ...

  5. 查询linux机器的公网ip

    在linux终端提示符下,输入以下命令: curl members.3322.org/dyndns/getip 可以看到下图已经查询到公网IP地址了,就是这么简单

  6. Application "org.eclipse.ui.ide.workbench" could not be found in the registry.问题的解决

    今天升级Eclipse,升级完Restart,碰到启动不了让看日志,日志里主要错误信息即是Application "org.eclipse.ui.ide.workbench" co ...

  7. 让 Homebrew 走代理更新 + brew 管理 node 版本

    0.前言 环境:MacOS 背景:整理下今天所做的配置. 1. 让 Homebrew 走代理更新 brew update 就卡住了,即使开了 shadowsocks 也不行.因为 shadowsock ...

  8. 同一台电脑上配置多个解压版tomcat方法（本例安装两个）

    一.在环境变量中设置变量() CATALINA_HOME = tomcat路径一 CATALINA_BASE = tomcat路径一 CATALINA_HOME2 = tomcat路径二 CATALI ...

  9. C/C++静态代码安全检查工具

    静态代码安全检查工具是一种能够帮助程序员自动检测出源程序中是否存在安全缺陷的软件.它通过逐行分析程序的源代码,发现软件中潜在的安全漏洞.本文针对 C/C++语言程序设计中容易存在的多种安全问题,分别分 ...

  10. django优化和扩展（一）

    mysql优化基础 进行django产品开发或上线之前,有必要了解一下mysql的基础知识,orm太过抽象,导致很多朋友对于mysql了解得太少,而且orm不像sqlalchemy那样可以跟mysql ...