1

ページの中央に沿って垂直に走る .wrapper と、ページの上部近くに水平に広がる .banner を持つ Web サイトを作成しようとしています。.banner には、1600x400 の画像といくつかのリンクが含まれます。私がやろうとしているのは、バナーがページから「はみ出す」効果を作成することです。これを行うには、ブラウザーの幅が .wrapper の幅よりも小さい場合にのみ、水平スクロール バーが表示されるようにします。ブラウザーの幅がバナーではなくコンテンツよりも小さい場合にのみ水平スクロールバーが表示されるEA ホームページのような効果を達成しようとしています。

私が欲しいものの画像：

ここに画像の説明を入力

要件：

  • ブラウザの幅が .wrapper の幅より小さい場合にのみ表示される水平バー
  • ブラウザの幅が .banner の幅より小さい場合、水平バーを表示しない
  • .banner は、ブラウザーの右側までずっと表示されている必要があります (.wrapper で切り取ることはできません)。

私に似たこの他の投稿を見ましたが、解決されませんでした。提案された解決策をいくつか試しましたが、役に立ちませんでした。

コード: http://jsfiddle.net/NZb3w/

<div class="wrapper">
    <div class="banner">
        <img src="http://www.placehold.it/1600x400">
    </div>
</div>

.wrapper {
    width: 960px;
    margin: 0 auto;
    background: #ccffff;
    height: 800px;
    padding-top: 50px;
}
4

3 に答える 3

0

たぶん試してみてください

.wrapper {
  min-width: 960px; 
  overflow-x:auto;
  width: 100%;
}

これにより、 の幅を.wrapper960 ピクセルより大きくすることができますが、959 ピクセルに達すると、スクロールバーが追加されます。

于 2012-09-15T04:29:34.843 に答える
0

max-width を使用してみてください。div が最大幅を取得すると、必要に応じて scroll-x: または y が設定されます。

.wrapper {
  max-width: 960px;
  margin: 0 auto;
  background: #ccffff;
  height: 800px;
  overflow: auto;
  padding-top: 50px;;
}
于 2012-09-15T19:17:44.823 に答える
-1

css 'min-width' プロパティをページまたは幅に使用して、要素が制限後に縮小せず、スクロールバーがこの後に表示されるようにします。スクロールバーを無効にするには、overflow:hidden を使用します。

于 2012-09-15T04:03:24.007 に答える