0

ファンシーボックスポップアップのあるギャラリーがあります。Fancybox ポップアップでは、左側に写真を表示し、右側にテキストを表示したいと考えています。テキストが長すぎる場合は、下にスクロールできるはずです。この場合、左側の画像はファンシーボックスの左上隅に固定し、テキストのみをスクロールする必要があります。

position:fixedとのバージョンを試しましたbackground-position:fixed。ただし、固定プロパティは常にビューポートから計算されるため、画像の一部はファンシーボックスの外に隠されています。Fancybox バージョン: 2.1.4 ここに私のサイトがあります: http://tinyurl.com/bl7do5e

ファンシーボックスポップアップ内の左側の画像を修正するにはどうすればよいですか?

4

1 に答える 1

1

画像の CSS では位置を相対に設定する必要がありますが、相対タグはその上の div の位置ステータスを参照します。これらのイメージで動作するはずですが、デバッグ中に問題が発生した場合は、将来これを探してください。

.sticker {
    position: relative;
    top: 0px;
    left: 0px;
    display: block;
}

スクロールテキストボックスについては、使用できます

div.item-page-contents {
    min-width: 100px;
    overflow: scroll;
}

これによりスクロール バーが表示されますが、適切に収まるようにするには、テキストを含む div のサイズをいじる必要があります。また、スクロール バーを非表示にしたい場合は、テキスト ボックスの div を、overflow: hidden を使用して小さい別の div 内にラップして、スクロール ホイールを保持したままバーを非表示にすることができます。

レンダリングはクールです これはあなたの作品ですか?

編集: ファンシー ボックスには、ボックス内にあるものが大きすぎる場合、ボックス全体 (画像を含む) がスクロールするというインライン css ルールがありますが、要素をどのように収めるかに注意している限り、勝ったその問題はありません。Joomla やファンシー ボックス プラグインにも、これを無効にする方法がある場合があります。私は以前にそれらを使用したことがないので、よくわかりません。

div.item-page-contents {
    width: 275px;
    float: right;
    height: 350px;
    overflow-y: scroll;
    overflow-x: hidden;
}
于 2013-05-11T23:33:20.733 に答える