腾讯微博格局实现
日期：2014-05-17 浏览次数：20811 次
腾讯微博布局实现
像腾讯微博那种布局怎么实现，
高人给点提示
------解决方案--------------------
像腾讯微博那种布局怎么实现，
高人给点提示
布局
腾讯微博
------解决方案--------------------
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS3瀑布布局</title>
<style>
.container {
-webkit-column-width: 160px;
-moz-column-width: 160px;
-o-colum-width: 160px;
-webkit-column-gap: 1px;
-moz-column-gap: 1px;
-o-column-gap: 1px;
}
div:not(.container) {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: #D9D9D9;
border::#CCC 1px solid;
display: inline-block;
width: 157px;
position: relative;
margin: 2px;
}
.title {
line-height: 80px;
font-size: 18px;
color: #900;
text-align: center;
font-family: "Microsoft YaHei";
}
</style>
</head>
<body>
<section>
<div class="container">
<div style="height:80px" class="title">纯CSS3瀑布布局</div>
<div style="height:260px"></div>
<div style="height:65px"></div>
<div style="height:120px"></div>
<div style="height:145px"></div>
<div style="height:90px"></div>
<div style="height:145px"></div>
<div style="height:160px"></div>
<div style="height:65px"></div>
<div style="height:230px"></div>
<div style="height:140px"></div>
<div style="height:85px"></div>
<div style="height:20px"></div>
<div style="height:145px"></div>
<div style="height:50px"></div>
<div style="height:65px"></div>
<
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
