1

この URLのページの下部にあるイメージ プレビュー コンテナーを作成しています。

http://cowperthwaite.dev.mybusinessadmin.com/location/51447

下部では、サムネイル イメージにスクロール バーが表示されていることがわかります。これは、親コンテナーの高さに収まりきらないためです。それは問題なく、意図したとおりに機能しています。

私が抱えている問題は、下にスクロールしても、左側に大きな画像が常に表示されるようにする必要があることです。言い換えれば、サムネイルにはスクロール領域があるのに対し、親 div に対して常に黄色のボックス内に固定する必要があります。

あらゆる種類のバリエーションを試してみましたが、うまくいきませposition:_______んでした。ここでは、より高度な概念が欠けているように感じます。また、私が達成しようとしていることが可能かどうかもわかりません。

誰かが洞察を提供してくれませんか？前もって感謝します

編集：derp、私のコードを提供しませんでした...

HTML:

<div class="pictureBoxContainer">
    <div class="pictureBox">
        <div class="pBoxLeftColumn">
            <?php
                echo "<div class='pBoxLargeImageContainer'>";
                echo "<img src='$pictureLinks[0]' id='largeImage' alt='Primary Image' class='pBoxLargeImage'>";
                echo "</div>";
            ?>
        </div>
        <div class="pBoxRightColumn">
            <?php
            foreach ($pictureLinks as $picture) 
            {
                echo "<div class='pBoxSmallImageContainer'>";
                echo "<img src='$picture' alt='Thumbnail' class='pBoxSmallImage'>";
                echo "</div>";
            }
            ?>
        </div>
    </div>
</div>

CSS:

.pictureBoxContainer {
    padding: 12px;
    clear:left;
    clear:right;
    width: 100%;
    background-color: #F7D961;
    border-radius: 12px;
    max-height: 350px;
}

.pictureBox {
    background-color: #FFF;
    border-radius: 12px;
    width: 97%;
    overflow: auto;
    padding: 12px;
    max-height: 300px;
}

.pBoxLeftColumn {
    display: block;
    float: left;
    min-width: 49.99%;
    max-width: 49.99%;
    overflow: auto;
}

.pBoxRightColumn {
    display: block;
    float: right;
    min-width: 49.99%;
    max-width: 49.99%;
    overflow: auto;
}

.pBoxSmallImageContainer {
    height: 103px;
    width: 145px;
    float: left;
    padding: 3px;
    margin: 3px;
    background-color: #F7D961;
    border-radius: 2px;
    position: relative;
}

.pBoxSmallImage {
    max-height: 95px;
    max-width: 138px;
    margin: auto;
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.pBoxLargeImageContainer {
    width: 100%;

}

.pBoxLargeImage {
    border-radius: 6px;
    min-width: 450px;
    max-height: 300px;
    position: static;
}
4

3 に答える 3

0

大きいものimgを にdiv、サムネイルを別のに配置しdiv、追加overflow-y:auto;してサムネイルdivに を付けheightます。

ここでデモを参照してください。

注: ではoverflow-y:auto;、親指の一部を削除して高さを超えないようにすると、スクロール バーが表示されなくなります。

于 2013-05-17T15:54:26.237 に答える
0 
.pBoxLeftColumn {
    display: block;
    float: left;
    min-width: 49.99%;
    max-width: 49.99%;
    overflow: auto;
    position:absolute;
    margin-top:0px;
}

これがあなたが望むものだと思いますか？

于 2013-05-17T15:56:08.550 に答える