Question

我在网站上遇到了问题。我的网站显示她同一页面中的所有记录，每条记录都调用称为“work”的主要div，并且在那个内部调用另一个名为“worktitle”的记录。

我希望worktitle div像图像一样： Image

但问题出在第二排。属于seconda行的div与第一行位于同一位置。就像你在这里看到的： Website

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;
}

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

Answer 1

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

.work{
   position: relative;
}
.worktitle {
   position: absolute;
   bottom: 0;
}

绝对多个div

1 个答案: