如何安排HTML元素页脚打破自动

Question

我有以下页脚在我的网站

与这个网站

<div class="footer_wrapper"> 
    <div class="top"> 
     <div class="footer_menu_block_float"> 
      <h1>Footer section</h1> 
      <ul> 
       <li>One</li> 
       <li>Two</li> 
       <li>Three</li> 
       <li>Three</li> 
       <li>Three</li> 
       <li>Three</li> 
       <li>Three</li> 
       <li>Three</li> 
      </ul> 
     </div> 
    </div> 
    <div class="clear"></div> 
    <div class="bottom"></div> 
</div>​ 

的footer_menu_block_float的高度是固定的。

.footer_wrapper .top div.footer_menu_block_float { 
    height: 140px; 
    float: left; 
    width: 200px; 
    margin: 10px 20px 0px 10px; 
} 

正如你所看到的一些文字是隐藏的。当页脚底部到达时，是否可以继续右侧？例如。从三个开始，四个将在旁边的一个和五个旁边，依此类推。任何想法如何做到这一点？也许我应该使用div？

Answer 1

我刚刚发现这个解决方案是非常有用的

<div class="footer_wrapper"> 
     <div class="top"> 
      <div class="footer_menu_block_float"> 
       <h1>Footer section</h1> 
       <div>One</div> 
       <div>Two</div> 
      </div> 
     </div> 
     <div class="clear"></div> 
     <div class="bottom"></div> 
    </div> 

随着

.footer_wrapper .top div.footer_menu_block_float div{ 
    float:left; 
} 

Answer 2

更换

height: 140px; 

通过

min-height: 140px; 

所以最小高度为200像素，但能得到更大的

玩得开心:)

Answer 3

我的想法是做两个ul小号并漂浮它们。看到这个小提琴：http://jsfiddle.net/T5822/