0

シンプルな HTML と CSS について質問があります。まず、この図を見てください。

ここに画像の説明を入力

複数の背景画像を含むページを作成しています。それぞれの幅は 1600px (写真では青、ピンク、緑) です。

ページのメイン領域 (黄色) は中央に配置され (マージン: 0 auto;)、幅は 800px です。

ブラウザウィンドウが中央領域（800px）よりも小さい場合にのみ、ブラウザの水平スクロールバーが表示されるようにしたいです。

これを行う方法はありますか？

助けてくれてありがとう、ひどいレイアウトと色について申し訳ありません;）

編集：

私がこれまでにやったこと：

私はラッパーで典型的なセンターdivを作ろうとしました:

<div id="wrap">
  <div id="child">

#wrap{ width:1600px; }
#child{ width: 800px; margin: 0 auto;}

ただし、wrape div全体としてスクロールが表示されるのは当然ですが、ここからどうすればよいかわかりません。

4

2 に答える 2

1

このようなもの

if ( $(window).width > 800 ){
    $("#thediv").css("overflow-x","hidden");
}
else{
    $("#thediv").css("overflow-x","scroll");
}
于 2013-03-29T09:41:24.157 に答える
1

私は*可能性*スローだと思います position

このように

HTML

<div class="one"></div>
<div class="one2"></div>
<div class="one3"></div>

<div class="parent">
Hello i m cente div <br>
Hello i m cente div <br>Hello i m cente div <br>Hello i m cente div <br>Hello i m cente div <br>Hello i m cente div <br>Hello i m cente div <br>Hello i m cente div <br>Hello i m cente div <br>
</div>

CSS

.one, .one2, .one3{
    height:200px;
}
.one{
    background:red;
}
.one2{
    background:green;
}
.one3{
    background:yellow;
}
.parent{
    background:blue;
    position:absolute;
    width:200px; // width according to your design
    left:50%;
    margin-left:-100px; // according to your width / 2 and define -margin
    top:0;

}

ライブデモ

于 2013-03-29T09:46:21.700 に答える