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

ofが欲しいのです#industrialDesignIMGが、何も動かないか、すべての要素が動きます。仕事を得るにはどうすればよいですか？margin-top80pximgmargin-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

要素のデフォルトの配置は静的です。したがって、要素の順序/配置は、兄弟要素の位置によって異なります。簡単にするfloat: leftために、画像タグに CSS を追加し、特定の画像にマージンを割り当てるだけです。例：

#wrapper img { float: left; }

にマージンを追加します#industrialImg。これにより、ヘッダーがコーナーに移動します。imgすべてを new でラップするだけdivです。それはうまくいくはずです。

于 2012-10-08T18:18:49.113 に答える