わかりました、これは簡単なはずです。基本的に、ここでやろうとしているのは、カルーセル画像ギャラリーのレイアウトを作成することです。JSFiddleはここにあります...
CSS...
.gallery {
margin-left: auto;
margin-right: auto;
width: 600px;
background-color: #000000;
height: 300px;
overflow: hidden;
white-space: nowrap;
}
.image {
margin-right: 300px;
margin-top: 50px;
position: relative;
height: 200px;
}
#image {
margin-left: -600px;
width: 287px;
}
#image-two {
width: 231px;
}
#image-three {
width: 242px;
}
HTML...
<div class="gallery"
><img src="../images/templateone.jpg" id ="#image" class="image" alt=""
/><img src="../images/templatetwo.jpg" id="#image-two" class="image" alt=""
/><img src="../images/templatethree.jpg" id="#image-three" class="image" alt=""/>
</div>
それはとても単純なことです。愚かなほど単純なことを見逃すことを恐れて、私は尋ねるのをためらっていました。私はオンラインで見回しましたが、この単純なマージンが機能しない理由がわかりません。
私が取得しようとしている効果は、すべての画像が水平線にあり、他の画像から大きな右マージンが分離されていることです。これで、最初の画像に負のマージンを追加して、最後の画像がステージの中央から始まり、残りの 2 つは左側の非表示の外側になるようにする必要があります。
なんらかの奇妙な理由で、最初の画像は左側の画像の外に出たくないのです。助けてください！
ありがとうございます！
コードに改行がある場合に発生する画像間の小さなスペースを防ぐために、タグの PS 終了はタグの前にあります。