怎样使用float属性实现图文编排？

Question

<div><div id="top"><h2>摄影社区热门小镇</h2><div  id="bottom"><ul><h2>风景阻击手</h2><li>成员：80</li><li>作品：276</li><h2>风景阻击手</h2><li>成员：80</li><li>作品：276</li><h2>风景阻击手</h2><li>成员：80</li><li>作品：276</li><h2>风景阻击手</h2><li>成员：80</li><li>作品：276</li><h2>风景阻击手</h2><li>成员：80</li><li>作品：276</li><h2>风景阻击手</h2><li>成员：80</li><li>作品：276</li><h2>风景阻击手</h2><li>成员：80</li><li>作品：276</li></ul></div></div></div>

Answer 1

要么多用ul 要么多用div 要么用table，你这样很乱的

我试了下你这样的

#bottom{display:table;}

#bottom ul{display:table-row;}

#bottom ul h2{margin:13px auto;}

#bottom ul li{display:table-cell;float:left;}

加上这几个样式后，勉强能看一下

其实：加ul或者div将小图文分开就可以直接float了，何必花那么多时间筛选h2和li呢