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一个margin-topof 80px，但要么什么都没有移动，要么所有img元素都移动。我能做些什么来让我的margin-top工作？

4

5 回答 5

6

它实际上正在应用中。只是因为图像都是内联元素，它们彼此内联，所以看起来它们都被向下移动了 80 像素，因为图像在底部对齐。

请参阅没有上边距的这个JSFiddle和带上边距的这个 JSFiddle 。

于 2012-10-08T18:12:40.210 回答
4

图像是内联元素。为了修复这个浮动每个图像向左，这将使它成为一个块元素：

http://jsbin.com/ekojux/1/

img { float: left }
于 2012-10-08T18:12:50.867 回答
1

采用：

padding-top: 80px;

或者：

position: relative;
bottom: -80px;
于 2012-10-08T18:12:33.133 回答
0

将所有图像浮动。

img {
    float: left;
}
于 2012-10-08T18:12:55.297 回答
0

任何元素的默认定位都是静态的。因此，任何元素的排序/定位将取决于兄弟元素的位置。简单来说，只需将 CSS 添加float: left到图像标签并为您的特定图像分配边距。例子：

#wrapper img { float: left; }

现在将边距添加到您的#industrialImg. 这会将您的标题移动到角落。只需img用新的div. 那应该行得通。

于 2012-10-08T18:18:49.113 回答