duanhanglekr37902 2012-09-09 06:26
浏览 52
已采纳

在<div>中定位元素

I would like to place all the child pictures within the defined gray (#999) div element. I specified relative top and left elements but the pics get placed all the way down in my document rather than relative within my div only- why is that? How do I get this going correctly?

<div style="height:400px;width:600px; background-color:#999999">
<?php

// Hiding notices:
error_reporting(E_ALL^E_NOTICE);

?>

<link rel="stylesheet" type="text/css" href="demo.css" />
<link rel="stylesheet"     href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-darkness/jquery-ui.css" type="text/css" media="all" />
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.2.6.css" />


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="gallery/fancybox/jquery.fancybox-1.2.6.pack.js">        </script>
<script type="text/javascript" src="gallery/script.js"></script>

<div id="main">
<div id="gallery">

<?php

/* Configuration Start */

$thumb_directory = 'gallery/img/thumbs';
$orig_directory = 'gallery/img/original';

$stage_width=400;   // How big is the area the images are scattered on
$stage_height=300;

/* Configuration end */

$allowed_types=array('jpg','jpeg','gif','png');
$file_parts=array();
$ext='';
$title='';
$i=0;

/* Opening the thumbnail directory and looping through all the thumbs: */

$dir_handle = @opendir($thumb_directory) or die("There is an error with your image     directory!");

$i=1;
while ($file = readdir($dir_handle)) 
{
/* Skipping the system files: */
if($file=='.' || $file == '..') continue;

$file_parts = explode('.',$file);
$ext = strtolower(array_pop($file_parts));

/* Using the file name (withouth the extension) as a image title: */
$title = implode('.',$file_parts);
$title = htmlspecialchars($title);

/* If the file extension is allowed: */ 
if(in_array($ext,$allowed_types))
{
    /* Generating random values for the position and rotation: */
    $left=rand(0,$stage_width);
    $top=rand(0,$stage_height);
    $rot = rand(-45,45);

    if($top>$stage_height-130 && $left > $stage_width-230)
    {
        /* Prevent the images from hiding the drop box */
        $top-=120+130;
        $left-=230;
    }

    /* Outputting each image: */

    echo '
    <div id="pic-'.($i++).'" class="pic" style="height:100px; width:138px; top:'.$top.'px;left:'.$left.'px;background:url('.$thumb_directory.'/'.$file.') no-repeat; -moz-transform:rotate('.$rot.'deg); -webkit-transform:rotate('.$rot.'deg); position: relative;">
    <a class="fancybox" rel="fncbx" href="/dev/'.$orig_directory.'/'.$file.'" target="_blank">'.$title.'</a>
    </div>';
}
}

/* Closing the directory */
closedir($dir_handle);

?>
</div>
</div>
</div>

link: http://inetgate.ca/dev/portfolio

  • 写回答

2条回答 默认 最新

  • douyazi1129 2012-09-09 06:42
    关注

    If you want to use the top and left properties, set position: absolute; on the divs, and position: relative; on their parent (#gallery).

    You can use these two css rules:

    #gallery {
      position: relative;
    }
    
    .pic {
      position: absolute;
    }
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

悬赏问题

  • ¥15 数学的三元一次方程求解
  • ¥20 iqoo11 如何下载安装工程模式
  • ¥15 本题的答案是不是有问题
  • ¥15 关于#r语言#的问题:(svydesign)为什么在一个大的数据集中抽取了一个小数据集
  • ¥15 C++使用Gunplot
  • ¥15 这个电路是如何实现路灯控制器的,原理是什么,怎么求解灯亮起后熄灭的时间如图?
  • ¥15 matlab数字图像处理频率域滤波
  • ¥15 在abaqus做了二维正交切削模型,给刀具添加了超声振动条件后输出切削力为什么比普通切削增大这么多
  • ¥15 ELGamal和paillier计算效率谁快?
  • ¥15 蓝桥杯单片机第十三届第一场,整点继电器吸合,5s后断开出现了问题