怎样使用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呢