向下扩展？

Question

所以当前当我添加一个新的条目到我的种类的列表中，它是这样的： [条目] - > [新条目] 然后在下面的行开始。我该怎么做，它首先将第一行填满，然后创建第二行，并直接填充该行。

为了更容易展现我的意思。我会给每一个条目一个数字，并说明它是如何工作的。

现在它是如何工作的：

5 6 ...

而且我希望它像工作：

任何人都知道我该怎么办？

代码来到这里。

HTML

<div id="staffs"> 
    <h5>The Management</h5> 
    <p> 
    <div class="staff_box"> 
     <img src="/images/users/1.png" class="staff_img" /> 
     <h3 class="staff_name">Sarah Doe <img src="/images/flags/Sweden-Flag-16.png" class="staff_country" /></h3> 
     <text class="staff_pos">CEO, Founder, Owner</text> 
     </div> 
     <div class="staff_box"> 
     <img src="/images/users/1.png" class="staff_img" /> 
     <h3 class="staff_name">David Doe <img src="/images/flags/Sweden-Flag-16.png" class="staff_country" /></h3> 
     <text class="staff_pos">CEO, Founder, Owner</text> 
     </div> 
     <!--Same boxes are repeated--> 
    </p> 
</div> 

CSS：

#staffs { 
width: 530px; 
height: 275px; 
float: left; 
clear: left; 
overflow-y: hidden; 
} 

h5 { 
text-align: center; 
background: #222; 
color: #888; 
padding: 5px; 
width: 510px; 
font-weight: bold; 
border-radius: 4px; 
} 

.staff_country { 
height: 12px; 
width: 12px; 
} 

.staff_box { 
width: 175px; 
height: 50px; 
margin-left: 5px; 
margin-top: 5px; 
clear: left; 
display: inline-block; 
} 

.staff_img { 
height: 50px; 
width: 50px; 
float: left; 
margin-right: 3px; 
border-radius: 4px; 
border: 1px solid #BBB; 
} 

.staff_name { 
font-size: 13px !important; 
margin: 0 !important; 
padding: 0 !important; 
padding-top: 2.5px !important; 
} 

.staff_pos { 
font-size: 11px; 
color: #777; 
} 

要看到它的行动，这里是一个的jsfiddle：http://jsfiddle.net/7MfLU/4/

我还需要就如何移动上面的条目一些帮助更高，靠近标题栏。

Answer 1

也许最简单的方法，因为你只是使用div，只是在你的HTML中重新排序它们。您也可以在staff_box内左右两边创建两个diva，然后将您的diva插入到相应的专栏中。要将条目更靠近标题栏，请将边距更改为更小（如果需要，可以变为负值）。