絕對多個div

Question

我在網站上遇到了問題。 我的網站顯示她在同一頁面的所有記錄，每個記錄調用稱爲「工作」的主要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必須是唯一的，所以改變#work到.work然後嘗試給它一個相對位置並將你的描述對齊到底部。

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