在一個區域生成多個div

-2

我想在指定區域生成多個div。我想從數據庫中加載相對位置到這些div的父節點。在一個區域生成多個div

因此，例如：

DIV 1 - 250，100像素
DIV 2 - 400像素，800像素
DIV 3 - 50像素，85px

正如你所看到的問題這裏是這些div不按照它們的相對位置順序加載。也會有重疊的div。

我將如何去把它們放在正確的相對位置父母。

我使用PHP從MySQL數據庫中加載這些位置，它們每個都有一個id和位置。我想把所有的div放在一個父div中。

我試過在CSS中使用相對和絕對位置，但他們沒有得到我想要的結果。

來源

2012-01-19 Preau

請提供更多的信息。周圍的代碼是什麼樣的？試過了什麼，結果如何？你將使用什麼後端系統（你將如何連接到數據庫）？ – zrvan

使父母有一個相對或絕對的位置。然後給所有孩子的位置'絕對'與數據庫來自左和頂部。

HTML：

<DIV id="parent"> 
    <DIV STYLE="left: 25px; top: 10px">DIV 1</DIV> 
    <DIV STYLE="left: 40px; top: 80px">DIV 2</DIV> 
    <DIV STYLE="left: 50px; top: 85px">DIV 3</DIV> 
</DIV>

CSS：

#parent { 
    position: relative; 
    left: 0px; 
    top: 0px; 
} 

#parent DIV { 
    position: absolute; 
}

小提琴這裏：http://jsfiddle.net/xgG2C/

來源

2012-01-19 09:38:52 Jochem

謝謝，正是我在找的東西！ – Preau

您可以按任意順序加載這些div並通過附加onmouseover事件解決overlaping的問題，這將觸發觸發該事件的DIV的最高z-index，使得該DIV與其他D12重疊，如

echo '<div>'; 
while ($row = mysql_fetch_assoc($mysqlResult)) { 
    echo '<div style="position:absolute;top:'.$row['top'].'; left:'.$row['left'].';"></div>'; 
} 
echo '</div>';

然後，當您的DIV準備就緒時，您可以將onmouseover事件附加到它們。在jQuery的它看起來就像這樣：

$('div div').mouseover(function() { 
    $('div div').removeClass(); 
    $(this).addClass('mouseover'); 
});

和少許CSS使

div div {z-index:1} 
div.mouseover {z-index:1000}

來源

2012-01-19 10:07:14

在一個區域生成多個div

回答

相關問題