0

1時間近く検索し、さらに1時間実験した後、CSS/HTMLでこれを行う方法が見つからないようです。

次の画像では、青いボックスはページのプライマリコンテンツを固定ピクセル幅で保持しているdivであり、赤いボックスは装飾を固定ピクセル幅で保持しているdivであり、黒い線はブラウザのサイズを示しています。

divボックスを使用したブラウザサイズの例

  • A-何も隠されていないため、水平スクロールバーはありません。すべてが中央に配置されます。
  • B-サイドディビジョンのみが非表示になっているため、水平スクロールバーはありません。メインのdivは中央に配置されます。
  • C-メインのdivがページに収まらないため、水平スクロールバーが表示されます。メインのdivは中央にあり、スクロールしてサイドのdivを表示することはできません。

画面の解像度が小さいユーザーやウィンドウのサイズ変更時に、ページを傷つけずにページに装飾を追加したいと思います。メインdivはプライマリコンテンツを保持するため、ユーザーはスクロールしてすべてを表示できる必要があります。一方、サイドdivは装飾用にのみ存在するため、ブラウザはそれらに基づいてスクロールしないでください。これを超えて自由度を高めたいので、代わりにサイドdivを背景画像として設定したくありません。

これは可能であるように思われます。それは...ですか？オーバーフローで遊んでいますが、何も動作しません。

（明確にするために、これは垂直方向ではなく、水平方向の中央揃え/スクロールに関するものです）

4

2 に答える 2

2

overflow: hidden;この効果を実現するには、CSS: を使用する必要があります。1 つが長く、もう 1 つが流動的な幅の 2 つの div を用意します。

.parent {width: 90%; overflow: hidden;}
.parent .child {width: 1200px; margin: auto;}
于 2012-10-12T02:57:32.390 に答える
1

これを達成するには、パーセンテージ値を使用します

HTML

<div class="outer">
    <div class="d1"></div>
    <div class="d2"></div>
    <div class="d3"></div>
</div>​

CSS

.outer{wisth:100%;border:solid 1px black; padding:25px}
.d1{background:red; width:32%; height:60px; display:inline-block}
.d2{background:green; width:32%; height:60px; display:inline-block}
.d3{background:blue; width:32%; height:60px; display:inline-block}

<strong>ライブデモ

于 2012-10-12T06:06:21.423 に答える