Home >Web Front-end >HTML Tutorial >腾讯微博布局实现_html/css_WEB-ITnose
腾讯微博布局实现_html/css_WEB-ITnose
- WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOriginal
- 2016-06-21 09:43:17828browse
布局 腾讯微博
像腾讯微博那种布局怎么实现，高人给点提示
回复讨论(解决方案)
<!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> <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:145px"></div> <div style="height:160px"></div> <div style="height:240px"></div> </div></section></body></html>运行效果(FireFox，Google Chrome下测试通过，其他浏览器未做测试~~)：
<!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> <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:145px"></div> <div style="height:160px"></div> <div style="height:240px"></div> </div></section></body></html>运行效果(FireFox，Google Chrome下测试通过，其他浏览器未做测试~~)： 谢谢我已经解决了
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：DWZ学习方法和步骤_html/css_WEB-ITnoseNext article：请问，css布局总宽度没超过父框架，为什么会 错位？_html/css_WEB-ITnose