[英]position elements within <div>
I would like to place all the child pictures within the defined gray (#999) div element. 我想将所有子图片放在定义的灰色(#999)div元素中。 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? 我指定了相对的顶部和左侧元素,但是图片一直放在我的文档中,而不是只在我的div中相对 - 为什么呢? 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 链接: http : //inetgate.ca/dev/portfolio
If you want to use the top
and left
properties, set position: absolute;
如果要使用top
和left
属性,请设置position: absolute;
on the divs, and position: relative;
关于div,和position: relative;
on their parent (#gallery). 在他们的父母(#gallery)。
You can use these two css rules: 您可以使用以下两个css规则:
#gallery {
position: relative;
}
.pic {
position: absolute;
}
Make the divs containing the images 制作包含图像的div
position: absolute;
Here 这里
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: absolute;">
<a class="fancybox" rel="fncbx" href="/dev/'.$orig_directory.'/'.$file.'" target="_blank">'.$title.'</a>
</div>';
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.