css 瀑布流布局问题 高手进

html-css012

css 瀑布流布局问题 高手进,第1张

这种瀑布流实现大体有两种方式，一种就是js的方式，一种是css，相对于js来说css的控制不是很好，不能自动加载之类的，只能显示一个瀑布流效果，大体的思路就是一个div里面放两个div分别浮动，高度自动，然后将图片分别放置到这两个div里面，这样就出现一个类似于瀑布流的效果了，当然了这个伪瀑布流的弊端就是如果一列的图片都是很高的，一列都是很矮的图片看着会很不协调。大体就是这个样子

<style type="text/css">

.demo1{width:600pxoverflow:hidden}

.demo1 li{width:100pxheight:100pxfloat:left}

.demo1 li img{width:100pxheight:100px}

</style>

<ul class="demo1">

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

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

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

</ul>

上面就是流式布局，其实就是浮动，希望帮助到你