1. 首頁
  2. 問答
  3. 爲什麼我的保證金頂部不起作用？

爲什麼我的保證金頂部不起作用？

2012-10-08 64 views
0

我有一張圖像列表，我試圖移動，但它不起作用。爲什麼我的保證金頂部不起作用？

HTML：

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Title</title> 
     <link rel="stylesheet" type="text/css" href="assets/css/style.css" /> 
    </head> 
    <body> 
     <div id="wrapper"> 
      <h1>Portfolio</h1> 
      <img src="assets/img/PHOTOGRAOHY.png" alt="Photography" width="214" height="183"> 
      <img id="industrialDesignIMG" src="assets/img/ID.png" alt="Industrial Design" width="232" height="183"> 
      <img src="assets/img/GraphicDesign.png" alt="Graphic Design" width="233" height="196"> 
      <img src="assets/img/animation.png" alt="Animation" width="198" height="142"> 
     </div> 
    </body> 
</html> 
​

CSS：

#industrialDesignIMG { 
    border:1px #fff solid; 
    display: inline-block; 
    margin-top: 80px; 
} 
#wrapper { 
    width:960px; 
    margin:0 auto; 
}

我想#industrialDesignIMG有80px的margin-top，但無論是什麼動作或全部img元素移動。我能做些什麼來讓我的margin-top工作？

來源

2012-10-08 Tsundoku

回答

1

用途：

padding-top: 80px;

或：

position: relative; 
bottom: -80px;

來源

2012-10-08 18:12:33 mreq

0

浮法所有圖像的左。

img { 
    float: left; 
}

來源

2012-10-08 18:12:55 Catfish

0

任何元素的默認定位是靜態的。因此，任何元素的排序/定位將取決於兄弟元素的位置。 簡單來說，只需將CSS float: left添加到圖片標籤併爲您的特定圖片分配保證金即可。例如：

#wrapper img { float: left; }

現在爲您的#industrialImg添加保證金。這將您的標題轉移到角落。只需將全部img換成新的div即可。這應該工作。

來源

2012-10-08 18:18:49 devsathish

相關問題

 相關問題