css - オーバーフローが十分に流れていない

Question

固定サイズの div 内に収まる必要があるスタイル付きの画像で構成されるコードがあります。そうでない場合は、オーバーフローする必要があります。ただし、収まらないフロート要素は、本来あるべきように流れますが、他の要素に触れて、それらの影の 1 つの上に配置されます。

例を使用して説明するのが最善です: http://jsfiddle.net/wjw83/10/

7 番目の画像 (かろうじて見える) は、完全に消えるか、可視領域の外に移動する場所でさらに下に移動する必要があります。誰でもこれを達成するのを手伝ってもらえますか?

ありがとうございました。

編集

アイデアが尽きて暴走寸前だったので、ランダムな属性を貼り始めて、最終的に成功しました。

「margin-bottom: 20px;」を追加するだけで済みました。画像クラスに。影と同じ値なので、クリップされた要素を完全に削除しながら、影をそのまま残します。うわー！

score 1 · Accepted Answer

.main{
    padding-top: 15px;
    width: 870px;
    height: 140px; /* Reduced height */
    overflow:hidden;
}

ライブデモ:フィドル

score 0 · Accepted Answer

アイデアがなく、怒りの危機に瀕している私は、ランダムな属性を貼り付け始め、最終的には成功しました。

「margin-bottom：20px;」を追加するだけでした。画像クラスに。シャドウと同じ値であるため、クリップされた要素を完全に削除しながら、シャドウをそのまま残します。うわぁ！

2 に答える 2