循環重疊圖像

我是JavaScript中的新手。我有一個功能，應該循環26次相同的圖像和文字。並將它們顯示爲多個圖像和文本段落。然而，我的循環重疊了文本和圖像，如下所示。 format I do not want 循環重疊圖像

我想讓我的代碼顯示如下圖所示的圖像。 format I want to display.

我該如何解決這個問題？我的JavaScript代碼如下所示

function getData() { 
    var stringData = ''; 

    for (i = 0; i < 26; i++) { 
    stringData = stringData + '<div><image src="img/sample-image.png" width="10% "height="10%" align="left" border="0"/>' + 'In this example a sample of the album photo on the site shall appear alongside a simple description of the album. To view the album select the album.</div><br/>'; 
    } 

    document.getElementById("list-menu").innerHTML = '' + stringData + ''; 
}

來源

2012-09-01 sammyukavi

在two <br />s should do the trick.簡單地增加，除此之外，嘗試clear: both in your div CSS。

來源

2012-09-01 04:54:52 Daedalus

明確：兩者都正常工作。謝謝。 – sammyukavi

發生這種情況是因爲您的圖像正在「向左對齊」。 'align =「left」''屬性在CSS中被當作'float：left;'語句處理。每當孩子在父母身上浮動時，父母就會崩潰 - 幾乎將其從文檔中取出。這就是所有浮動圖像互相交互的原因。（1）使用'clear：both;'作爲代達羅斯狀態*（這會清除父代中的任何浮動影響）*或（2）'overflow：hidden;'*（其中強制父母正確計算它的高度幷包裝它的孩子。）* – Pebbl

循環重疊圖像

回答

相關問題