插入一個div

首先，我很抱歉，如果這個問題已經被問過。我真的不知道要搜索什麼，甚至試圖解釋這一點，我感到茫然。我會盡我所能清楚。插入一個div

我想要的10-20縮略圖頁面。每個圖像將在div中填充。圖像的大小是未知的，但容器的寬度將是一個設定值，比方說1000px。我想要浮動的圖像，以便它們從左到右排列。

我想圖像的第一行後插入一個div。這個div將跨越容器的寬度。圖像將在這個div之後繼續。由於我不確定圖像有多寬，我不確定第一行有多少圖像。我希望瀏覽器呈現儘可能多的項目，以適應第一行，然後廣告div，然後繼續項目。這甚至有可能嗎？

再次，抱歉不知道如何提出這個問題，或者如果它是重複的。

感謝，斯科特

來源

2016-03-06 Scott Dallas

請提供CodePen或的jsfiddle起點，也請參見http：//計算器。 COM /幫助/ MCVE – Roy

這是可能的，

使用CSS，這兩個屬性（所有div）是：

float: right; 
    position: relative;

如需進一步信息看W3Schools的對DIV + CSS屬性。

來源

2016-03-06 13:32:30

這並不能在所有幫助，再次閱讀問題:)，至極更像是，我怎麼能得出每一行......各種元素的數量可以varie和未知後面添加一個跨越盒子？ –

號這不能用CSS來實現。您需要手動插入所有內容，使用javascript將其呈現在瀏覽器中，或者在發送頁面之前使用服務器端語言來完成此操作。

如何做到這一點對於SO來說太廣泛了。

來源

2016-03-06 13:41:16 Rob

首先，它聽起來不是最好的想法，不能控制元素的大小。

我不太瞭解你的情況，因爲你沒有提供任何代碼，但從我的理解，下面應該可以工作。

你說的容器應爲1000像素。如果您在圖像上設置了絕對寬度，則應該能夠確定每行將顯示多少個元素。

如果您的圖像寬度爲100px，則每邊填充10px，每邊填充10px。 100 + 20 + 20 = 140px每張圖片* 7 = 980px。

這樣你就知道在手動插入行之前你只能顯示7個元素。

如果您是從數據庫通過PHP循環的結果，你可以做這樣的事情：

<?php 

$i = 0; 
while($row = $sth->fetch(PDO::FETCH_ASSOC)) { 
    if($i >= 7) { 
    echo '<div class="between">bla bla bla</div>'; 
    $i = 0; 
    } else { 
    echo '<div class="img-wrap">'; 
    echo '<img src="'.$row['image'].'" />'; 
    echo '</div>'; 
    $i++; 
    } 
} 


?>

http://codepen.io/anon/pen/ZWQzLV

來源

2016-03-06 14:02:04 hesonline

插入一個div

回答

相關問題