0

私はCSSを初めて使用するjavascript/PHPプログラマーであり、オーバーフローのあるコンテナーに画像を表示するのに問題があります。私の理解では、以下のコードは、15ピクセルのスペースを挟んで3行の画像を表示する必要があります。代わりに、divがあるべき場所の左上に1つの画像が表示されます。divのIDを削除すると、画像は縦線で表示され、divを完全に削除すると、通常はページを右方向に流れます。divに背景色を指定すると、適切なサイズと適切な場所に表示されました。

#items_container {
    position:absolute;
    overflow:auto;
    height:500px;
    width:500px;
}
.item_image {
    margin: 0 15px 15px 0;
    padding: 0 0 0 0;
}

<div id="items_container">
    <img src="imageLocation" height="150" width="150" class="item_image" />
    <img src="imageLocation" height="150" width="150" class="item_image" />
    <img src="imageLocation" height="150" width="150" class="item_image" />
    <img src="imageLocation" height="150" width="150" class="item_image" />
    <img src="imageLocation" height="150" width="150" class="item_image" />
    <img src="imageLocation" height="150" width="150" class="item_image" />
</div>

また、コンテナdivにHTMLで高さ/幅を指定し、画像クラスにCSSで高さ/幅を指定してみました。どちらも何もしませんでした。皆さん、助けてくれてありがとう！

4

1 に答える 1

1

質問を完全に理解しているかどうかはわかりませんが、これが構造のレイアウト方法です。

http://jsfiddle.net/mDXL2/

HTML

<div id="items_container">
    <img src="imageLocation" height="150" width="150" class="item_image" />
    <img src="imageLocation" height="150" width="150" class="item_image" />
    <img src="imageLocation" height="150" width="150" class="item_image" />
    <img src="imageLocation" height="150" width="150" class="item_image" />
    <img src="imageLocation" height="150" width="150" class="item_image" />
    <img src="imageLocation" height="150" width="150" class="item_image" />
</div>

CSS

#items_container {
    overflow:hidden;
    height:500px;
    width:500px;
}
.item_image {
    float:left;
    margin: 0 15px 15px 0;
    padding: 0 0 0 0;
}

オーバーフロー隠しはクリアに置き換えることができますが、私はオーバーフロー隠しルートに行くことを好みます。

その後、すべての.item_image要素をフロートする必要があります。

于 2013-03-12T19:57:28.677 に答える