0

私の英語でごめんなさい。

div に問題があります。水平方向に「画像付き」の 3 つの div があります。画像は一緒にする必要があります。

画面が十分に大きい場合、これがデフォルトのビューです。 始める

ナビゲーターのサイズが変更されると、#div2 で中心が失われます。#div1 は左に配置されていますが、これは必要ありません。 問題

私が必要としているのは #div2 を中心にとどめることですが、それを行う方法がわかりません。#div1 と #div3 はナビゲーターの外側にあり、どの div もサイズ変更できず、固定サイズです。 私が欲しいもの

HTML コード:

<body id="body">
    <div id="wrap">
        <div id="baseLeftBg">
        </div>
        <div id="baseContent">
        </div>
        <div id="baseRightBg">
        </div>
    </div>
</body>

CSS コード:

#body {
    text-align: center;
    height: 100%;
    margin: 0 auto;
    padding: 0px;
    background: #ffffff;
    -moz-background-size: cover;
    background-size: cover;
    float: inherit;
}

#wrap { 
    width: 1484px;
    margin: 0 auto;
    text-align:center;
}

#baseLeftBg {
    margin-top: 60px;
    background: #CDCDCD;
    width: 286px;
    height: 776px;
    float: left;
}

#baseContent {
    margin-top: 60px;
    background: #A7A7A7;
    width: 911px;
    height: 776px;
    float: left;
}

#baseRightBg {
    margin-top: 60px;
    background: #CDCDCD;
    width: 286px;
    height: 776px;
    float: left;
}

どうすればそれができますか？

フィドルへのリンク: http://jsfiddle.net/murb83/BChLs/

ありがとう！！

4

6 に答える 6

0

問題を解決するためにJavascriptを使用することを検討してみませんか？
3つのdivを含むコンテナを必要なだけ大きくする必要があります。また、画面の幅に基づいてjavascriptを使用して、左マージンを設定する必要があります（明らかに負の数になる可能性があります）。

次に、JSを使用すると、画面のサイズ変更でイベントを処理して、左マージンを「調整」することもできます。

于 2012-07-10T12:21:47.783 に答える
0

それは、現時点ではJSなしで問題なく機能するソリューションです...

#wrap { 
    margin-top: 5%; 
    left: 50%;
    margin-left: -742px;
    position: absolute;
    width: 1484px;
    height: 776px;
}
于 2012-07-17T14:20:53.927 に答える
0

たぶん、次のようなパーセンテージで動的にしてみてください。

#baseLeftBg {
    ..
    width: 20%;
    ..
}

#baseContent {
    ..
    width: 60%;
    ..
}

#baseRightBg {
    ..
    width: 20%;
    ..
}
于 2012-07-10T11:38:18.660 に答える
0

ラッパーのテキストを中央に揃えると便利です。これにより、要素が中央に表示されます。

#wrap { 
    width: 1484px;
    margin: 0 auto;
    text-align:center;
}
于 2012-07-10T11:23:57.953 に答える
0

jsQuery でそれを行う方法を見つけました。

HTML

<body id="body">
    <div id="wrap">
        <div id="baseLeftBg">
        </div>
        <div id="baseContent">
        </div>
        <div id="baseRightBg">
        </div>
    </div>
</body>​

CSS

#body {
    text-align: center;
    height: 100%;
    margin: 0 auto;
    padding: 0px;
    background: #ffffff;
    -moz-background-size: cover;
    background-size: cover;
    float: inherit;
}

#wrap { 
    width: 500px;
    height: 300px;
}

#baseLeftBg {
    background: #CDCDCD;
    width: 100px;
    height: 300px;
    float: left;
}

#baseContent {
    background: #A7A7A7;
    width: 300px;
    height: 300px;
    float: left;
}

#baseRightBg {
    background: #CDCDCD;
    width: 100px;
    height: 300px;
    float: left;
}​

JSクエリ

$(window).resize(function(){
  $('#wrap').css({
    position:'absolute',
    left: ($(window).width() - $('#wrap').outerWidth())/2,
    top: ($(window).height() - $('#wrap').outerHeight())/2
  });
});

// To initially run the function:
$(window).resize();

var $scrollingDiv = $("#wrap");
     $(window).scroll(function(){            
        $scrollingDiv.stop().animate({"marginTop": ($(window).scrollTop() + 0) + "px"}, 500, 'easeInOutSine' );            
     });

実際に見てください：http://jsfiddle.net/murb83/BChLs/

于 2012-07-10T14:38:14.323 に答える
0

他の解決策は、次のような絶対配置を使用することです。

#wrap {
..
position:relative;
..
}

#baseLeftBg {
margin-top: 60px;
background: #CDCDCD;
width: 286px;
height: 776px;
position:absolute;
top:0;
left:0;
}

#baseContent {
margin-top: 60px;
background: #A7A7A7;
width: 911px;
height: 776px;
position:absolute;
top:0;
left:0;
right:0;
}

#baseRightBg {
margin-top: 60px;
background: #CDCDCD;
width: 286px;
height: 776px;
position:absolute;
top:0;
right:0;
}
于 2012-07-10T11:43:33.540 に答える