UL/LI向下流動，然後向右移動時出現空間

我正在嘗試爲頁腳導航創建一些HTML/CSS。UL/LI向下流動，然後向右移動時出現空間

我想要的主要部分是單獨的ul's，然後是每個子部分作爲li中的一個。

ul會有一個固定的高度，裏面流淌下來。如果他們沒有空間下樓，我希望他們再次從右手邊開始。

我以爲這將是非常簡單的，用下面的HTML/CSS

<ul class="my_ul"> 
<li class="bold"> Home </li> 
</ul> 
<ul class="my_ul"> 
<li class="bold"> Catalogue </li> 
<li> Category 1 </li> 
<li> Category 2 </li> 
<li> Category 3 </li> 
<li> Category 4 </li> 
<li> Category 5 </li> 
</ul> 
<ul class="my_ul"> 
<li class="bold"> Company </li> 
<li> Company 1 </li> 
<li> Company 2 </li> 
<li> Company 3 </li> 
<li> Company 4 </li> 
<li> Company 5 </li> 
</ul> 


.my_ul { 
height: 130px; 
float: left; 
} 
.my_ul li { 
float: left; 
clear: left; 
list-style: none; 
}

上述工程試了一下，只是當它到達吊橋在持續上行的底部。顯然溢出：隱藏使它消失，但這不是我想要的。我希望它在右側開始一個新的專欄。

任何想法，我可以改善這一點？

感謝，

馬特

來源

2011-02-22 Matt McDonald

你在找什麼做的，你不能用純CSS做的，很遺憾。您可以使用JavaScript和CSS的組合。

來源

2011-02-22 22:01:31 TNC

感謝您的回覆。我認爲這可能是這種情況，但希望獲得純粹的CSS解決方案。我可能會用一些PHP來計算添加了多少，給他們一個固定的高度。文本導航的整個目的是爲了適應那些瀏覽器比較少的瀏覽器，它們缺少像javascript這樣的東西。 – 2011-02-22 22:03:40

啊 - 是的，PHP應該是一個本壘打。歡呼聲 – TNC 2011-02-22 22:06:46

對於您可以使用CSS3，雖然它不會在工作舊的瀏覽器IE9也鋼筋混凝土柱。

#yourfooter 
{ 
column-count: 3; 
}

如果你的目標羣體是不可能有CSS3支持任何現代的瀏覽器，我會親自走輕鬆快捷方式，通過使一對夫婦的div的持有量。

來源

2011-02-22 23:11:54 holaq

謝謝。很高興知道這將在未來更容易！ – 2011-02-22 23:43:01

我找到了一種方法......僅使用CSS，使用了第n個子選擇器。（這可能會在舊瀏覽器上遇到麻煩）。

在這裏看到演示： http://jsfiddle.net/MYB7g/3/

下面是相關的CSS：

ul { 
    white-space: nowrap; 
    margin: 0; 
    padding: 0; 
    margin-bottom: 100px; /* space the two demos apart */ 
} 

li { 
    width: 180px; 
    height: 30px; 
    background-color: rgba(0,0,255,.5); 
    color: white; 
    padding: 5px; 
    margin: 0px; 
    border-radius: 8px; 
    font-family: Helvetica; 
    font-size: 24px; 
    line-height: 30px; 
    display: inline-block; 
} 


/******************************************/ 
/* N = 2         */ 
/******************************************/ 

ul.rows2 { 
    margin-left: 180px; /* li.width * (N-1) */ 
} 

ul.rows2 li { 
    margin-left: -180px; /* -(li.width * (N-1)) */ 
} 

ul.rows2 li:nth-child(even) { 
    background-color: rgba(255,0,255,.5); 
    position: relative; 
    top: 50px;  /* li.height + vertical spacing */ 
    left: -195px;  /* -(li.width + horizontal spacing */ 

    margin-left: 0px; 
} 

/******************************************/ 
/* N = 3         */ 
/******************************************/ 

ul.rows3 { 
    margin-left: 360px; /* li.width * (N-1) */ 
} 

ul.rows3 li { 
    margin-left: 0px; 
} 

ul.rows3 li:nth-child(3n+1) { /* top */ 
    margin-left: -360px; /* -(li.width * (N-1)) */ 
} 

ul.rows3 li:nth-child(3n+2) { /* second */ 
    background-color: rgba(255,0,0,.5); 
    position: relative; 
    top: 50px;  /* li.height + vertical spacing */ 
    left: -195px;  /* -(li.width + horizontal spacing */ 
} 

ul.rows3 li:nth-child(3n+3) { /* bottom */ 
    background-color: rgba(255,0,255,.5); 
    position: relative; 
    top: 100px;  /* 2*(li.height + vertical spacing */ 
    left: -390px;  /* -2*(li.width + horizontal spacing */ 
}

來源

2011-07-21 04:41:24

我會注意到這個解決方案使用每列的特定數量的項目。如果你仍然希望它垂直流動填充任意高度，然後換行到下一列，我不知道該怎麼做。 – 2011-08-02 21:33:43

現在有一個CSS只爲這個問題的解決方案。 CSS3的彈性盒模型僅通過CSS即可達到理想的效果。

ul { 
    display: flex; 
    flex-flow: column wrap; 
}

http://jsfiddle.net/2Dr6E/

這將使ul的內容（li標籤）流從上到下，再從左到右一旦填充ul的高度。

這是支持最新的瀏覽器Chrome瀏覽器，歌劇，Firefox和IE11 - 以及Safari和（與-webkit-前綴），並用IE10（-ms-前綴）。

來源

2014-05-07 07:02:39 davur

UL/LI向下流動，然後向右移動時出現空間

回答

相關問題