在較大的圖像上顯示較小的圖像

我試圖在一個較大的圖像上顯示兩個小圖形;一個在左上角&另一個在右下角。所以畫面看起來應該像下面的一個：在較大的圖像上顯示較小的圖像

http://i52.tinypic.com/j5cqw9.png

我的問題是，我的HTML & CSS不使較小的圖像騙了&較小的圖像沒有放置在較大的圖像的頂部正確的位置。

我在做什麼錯？ PS：是CSS垂直對齊的跨瀏覽器

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title></title> 
    <style type="text/css"> 
    <!-- 
     body { background-color: gray; } 
     .col1 { width: 30%; float: left; background-color: blue; } 
     .col2 { width: 70%; float: left; } 

     #pastEvents  { background-color: red; } 
     #pastEvents td { padding: 20px; background-color: blue; } 

     .pastEventDiv  { position: relative; background-color: yellow; } 
     .eventBorderNorth { position: absolute; left: 0px; top: 0px; z-index: 10; } 
     .eventBorderSouth { float: right; vertical-align: bottom; z-index: 10; /*text-align: right;*/ } 
     .eventPic   { position: absolute; left: 0px; top: 0px; z-index: 0; } 

    --> 
    </style> 
</head> 

<body> 

    <div class="col1"> 
     abvdvf 
    </div> 

    <div class="col2"> 
     <table id="pastEvents"> 
      <tr> 
       <td> 
        <div class="pastEventDiv"> 
         <img class="eventBorderNorth" src="images/picBorderNorth.png" width="30" height="30" alt=""/> 
         <img class="eventBorderSouth" src="images/picBorderSouth.png" width="30" height="30" alt=""/> 
         <img class="eventPic" src="images/1.jpg" width="100" height="200" alt=""/> 
        </div> 
       </td> 
       <td> 
       </td> 
      </tr> 
     </table> 
    </div> 

</body> 

</html>

來源

2011-03-14 Mack

你爲什麼浮動.eventBorderSouth？它應該是：

.eventBorderSouth { position: absolute; right: 0; bottom: 0; z-index: 10;}

所以就像左上角的圖像，然後在另一個角落。

來源

2011-03-14 01:00:57 GolezTrol

當我接受你的忠告，南PIC顯示在左上角角落也是。你確定我應該把權利設置爲0＆bottom到0嗎？ – Mack 2011-03-14 01:46:03

是的，但我認爲你應該從eventPic中移除'position：absolute'。然後，該圖像將強制單元格尺寸合適，從而允許南圖像正確定位。 – GolezTrol 2011-03-14 09:34:33

你需要做一些小事情來完成這項工作。首先，擺脫對.eventBorderSouth的float和vertical-align的，然後添加GolezTrol暗示的定位：

.eventBorderSouth { 
    position: absolute; 
    right: 0; 
    bottom: 0; 
    z-index: 10; 
}

現在你會看到.eventBorderSouth是左上的.eventBorderNorth的。爲什麼是這樣？那麼，你的.pastEvent<div>只包含絕對定位的元素，所以它的寬度和高度爲零;顯而易見的解決辦法是告訴<div>它應該多大：

.pastEventDiv { 
    position: relative; 
    background-color: yellow; 
    width: 100px; 
    height: 200px; 
}

活生生的例子（當然，破碎的形象）：http://jsfiddle.net/ambiguous/MBGVX/

來源

2011-03-14 07:12:54

在較大的圖像上顯示較小的圖像

回答

相關問題