php - php for循环中的div控件

Question

要求:我想控制我的动态 div 的位置。每个 div 都应该引用父 div。

问题:下面的代码不允许根据父 div 更改 div 位置。例如，#dldescription top:10%;应该使用 div id="dlitem"作为指南。我尝试了几种策略，但似乎无法按计划进行。

<?php 
include '/scripts/connect_to_mysql.php';
$result = mysql_query('SELECT * FROM table');

echo '<div id="dlcontainer" style="border-style:groove;">
<div id="dlitem">';

$i= 0;

while ($row = mysql_fetch_array($result)) 
{
//each style will control the placement of the div relative to the parent div id=dlitem
echo'<style>
    #dldescription_'.$i.'{
        vertical-align:middle;
         position: absolute;
        text-align:center;
        top:10%;
        left:45px;
    }
    #dlimage_'.$i.'{
        vertical-align:middle;
        position: absolute;
        text-align:center;
        top:10%;
        left:45px;
    }
    #dltitle_'.$i.'{
        vertical-align:middle;
         position: absolute;
        text-align:center;
        top:10%;
        left:45px;
    }
    #dllink_'.$i.'{
        vertical-align:middle;
         position: absolute;
        text-align:center;
        top:10%;
        left:45px;
        display: inline-block;
    }
    </style>


    <div id="dltitle_'.$i.'" >'.$row['col1'].'</div>
    <div id="dlimage_'.$i.'"  align="center"><img src =./'.$row['col2'].' width="75" height="150"></div>
    <div id="dldescription_'.$i.'"  align="center" ><img src="/img/facebookShare.png">  '.$row['col3'].' off</div>
    <div class="dllink_'.$i.'"  align="center"><a href="http://www.website.com">Limit '.$row['col4'].'</a></div>

';
$i++;

}
echo '</div></div>';



?>

Answer 1

要使 div 相对于父 div 的位置，您需要将它们的位置从 absolute 更改为 relative，例如:

position:relative;

这是一个很好的指南:http://learnlayout.com/position.html