Question

请求：我想控制动态div的位置。每个div应该引用父div。

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

<?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

在php for循环中划分控制

1 个答案: