0

我在我的网站上遇到了一个问题。我的网站在她的同一页面中显示所有记录，每条记录都调用名为“work”的主 div，而在其中一个名为“worktitle”的主div。

我希望工作标题 div 像图像一样： 图像

但问题出在第二行。属于第二行的 div 与第一行位于同一位置。就像你可以在这里看到的： 网站

HTML 代码

<div id="box1">
<?php do { ?>
 <div id="work">
 <a href="<?php echo $row_works['url']; ?>" target="new">
 <img src="images/<?php echo $row_works['image']; ?>" />
 <div class="worktitle">
 <span class="infotec"><?php echo $row_works['infotec']; ?><br/>
 <?php if ((isset($_GET['lang'])) && ($_GET['lang']=="en")) {
     echo $row_works['descriptionen']; }
     else {
         echo $row_works['descriptionpt'];
        } ?>
 </span>
 <span class="title"><?php echo $row_works['title']; ?></span>
 </div>
 </a>
 </div>
 <?php } while ($row_works = mysql_fetch_assoc($works)); ?>
</div>

CSS 代码

#work {
float: left;
margin: 0px;
padding: 0px;
width : 200px;
border: solid 1px #787879;
}

#work a{
    color: #FFF;
    text-decoration:none;
}
#work a:hover {
    opacity: 0.5;
}

#work img {
    margin: 0px;
    width: 200px;
    z-index: 9;
}

a img{
border: 0;
}
.worktitle {
    position: absolute; 
    top: 200px; 
    background-color: #787879;
    opacity: 0.6;
    font-weight: bold;
    font-size: 14px;
    z-index: 10;
}
.infotec {
    font-weight: normal;
    font-size:9px;
}
.title {
    text-align: right;
}

我究竟做错了什么？请帮帮我。

4

1 回答 1

0

首先，您的 html 中的 id 必须是唯一的，因此更改#work为.work然后尝试给它一个相对位置并将您的描述与底部对齐。

.work{
   position: relative;
}
.worktitle {
   position: absolute;
   bottom: 0;
}
于 2013-06-30T20:32:24.267 回答