css - CSS divで2つの画像を配置する

Question

このスタイルで画像を設定しようとしています: 1 つは上に、もう 1 つはこの下に。実際、私は何か間違ったことをしており、結果として画像が上下にずれています。ここに jsFiddleがあります。

2 番目の画像はクラスoverflow:hidden内で非表示になっています。slider

質問：

どこで間違えますか？簡単な解決策があると確信していますが、時間を失って見つけることができません。

PS 可能であれば、cssの変更のみによる解決策を探しています。

Answer 1

画像のCSSを次のように変更します。

img{
    display:block;
}

それはトリックを行います。

コメント後に編集：

img{
    position: absolute;
    z-index: -1;
    top: 0px;
    left:0;    
}

これにより、左上隅ですべての画像が互いにホチキス止めされます。

Answer 2

私はあなたがすでに答えをマークしているのを見ます、しかし私はすでにこれをタイプしたのでここに行きます:)

ここでもフロートを削除することでCSSを少し単純化できます。スライダーに画像のみを使用している場合（画像の横にテキストはありません）、.photodiv全体を削除することでHTMLを単純化することもできます。

簡略化されたコード：

<div class="slider">
    <img src="http://lorempixel.com/754/453/" alt="Bottom Image" />
    <img src="http://placehold.it/754x453" alt="Top Image" />
</div>

.slider {
    overflow: hidden;
    position: absolute;
    top: 1px;
    left: 371px;
    width: 754px;
    height: 453px;
}
img{
    position: absolute;
    z-index: -1;
    top: 0px;
    left:0px;
}

http://jsfiddle.net/daCrosby/MP6qN/8/

Answer 3

私はあなたのimgがしなければならないと思います

img
{
display:block; /*if you want top to bottom use display:inline;*/

}