填充容器（一個div），直到它已滿

我有一個字符串數組。填充容器（一個div），直到它已滿

$x=array('blabla1', 'blabla2', ...);

我想從$x填充div塊用繩子，直到我的div已滿。我的div的高度固定爲$h。

舉例來說，我希望把我的div類似的東西

<div> 
    <ul> 
      <li> 'blabla1' </li> 
      <li> 'blabla2' </li> 
      <li> 'blabla3' </li> 
      ... 
     </ul> 
</div>

直到填滿。

任何猜測如何做？ Javascript或php？謝謝:)

爲什麼我想這樣做：我在我的網頁上有一個側面div，並帶有建議的鏈接。我希望在這個邊欄中儘可能多的建議鏈接。

科拉斯

PS：隨意編輯自己的帖子（例如，添加標籤）。

來源

2012-11-01 Colas

，這是非常困難的 - 你不能沒有從JavaScript幫助檢測客戶端的字體大小/設置，如果沒有這些信息不能確定如何「大」的文字會。 –

好吧，我可能會同時使用JavaScript和PHP。 – Colas

任何你不能只使用'overflow：hidden'的原因？ –

因爲你已經知道你的div的固定高度值。你也可以給li元素添加一個固定的高度值，然後從php中執行以下操作：我假設你已經在CSS中設置了div和ul的固定高度值。

$div_height = 500px; 
    $li_height = 21px; 


    echo '<div id="mydiv"><ul id="myul">'; 

    for($i=0;$i<=$div_height;$i+=$li_height){ 
     echo "<li>"."your content here"."</li>"; 
    } 

echo '</ul></div>';

來源

2012-11-01 15:33:00 slash28cu

這是我的第一個想法，但如果一件物品需要多條線？ – Colas

它會成爲問題，只是使用PHP來做到這一點。

我的建議是使用溢出隱藏CSS屬性與jQuery插件喜歡做的組合：

dotdotdot

來源

2012-11-01 15:35:16

Dotdotdot聽起來不錯！ – Colas

您必須確定您的div的高度在任何固定可衡量的單位，如像素。然後調整每個列表項目的高度。通過將div的高度/列表項的高度，你會知道的要求列表項目的數目別回答n所以你的DIV中做到以下幾點：

<div class="define-height"> 
<ul> 
<?php 
for ($i = 0; $i < $n; $i++){ 
?> 
<li><?php echo $x[$i];?></li> 
<?php } ?> 
<ul> 
</div>

來源

2012-11-01 15:36:13 SaidbakR

這是我的第一個想法，但如果一件物品需要多條線？ – Colas

@Colas。然後你必須通過javascript來完成。從javascript是創建後可以擁有dom元素高度的唯一方法。也許這個div必須通過ajax調用php來動態填充，只返回一個li元素。然後在JavaScript中計算，如果有足夠的空間來anoter李元素在這種情況下做下一個電話，直到沒有更多的可用空間。你也可以在你的div中設置overflow：hidden，但這隻會隱藏不在div內的內容。 – slash28cu

使用jQuery客戶端：

while($("#divId").height() > $("#ulId").height()) { 
    $("#ulId").append("<li>blabla1</li>"); 
}

來源

2012-11-01 15:48:10 Bruno

來自評論：

任何原因你不能只使用overflow：hidden？ - 馬克B
然後你必須通過javascript doit。從javascript是創建後可以擁有dom元素高度的唯一方法。也許這個div必須通過ajax調用php來動態填充，只返回一個li元素。然後在JavaScript中計算，如果有足夠的空間來anoter李元素在這種情況下做下一個電話，直到沒有更多的可用空間。你也可以在你的div中設置overflow：hidden，但這隻會隱藏不在div內的內容。 - slash28cu

在PHP

來源

2012-11-02 06:35:36 Colas

填充容器（一個div），直到它已滿

回答

相關問題