0

http://jsfiddle.net/JPt3X/2/

html-

<div class="page">
<div class="header boxshadowsmaller">
</div>

        <div class="mainleft boxshadowsmaller">
        </div>

        <div class="maincenter">
            <div id="videowrapper">
                <div class="videobox">
                    <object class="boxshadowsmaller" width="360" height="240" type="application/x-shockwave-flash" id="live_embed_player_flash" data="http://www.twitch.tv/widgets/live_embed_player.swf?channel=athenelive"><param name="wmode" value="opaque" /><param name="allowFullScreen" value="true" /><param name="allowScriptAccess" value="always" /><param name="allowNetworking" value="all" /><param name="movie" value="http://www.twitch.tv/widgets/live_embed_player.swf" /><param name="flashvars" value="hostname=www.twitch.tv&channel=athenelive&auto_play=false" /></object>
                </div>
                <div class="videobox">
                    <object class="boxshadowsmaller" width="360" height="240" type="application/x-shockwave-flash" id="live_embed_player_flash" data="http://www.twitch.tv/widgets/live_embed_player.swf?channel=athenelive"><param name="wmode" value="opaque" /><param name="allowFullScreen" value="true" /><param name="allowScriptAccess" value="always" /><param name="allowNetworking" value="all" /><param name="movie" value="http://www.twitch.tv/widgets/live_embed_player.swf" /><param name="flashvars" value="hostname=www.twitch.tv&channel=athenelive&auto_play=false" /></object>
                </div>
                <div class="videobox">
                    <object class="boxshadowsmaller" width="360" height="240" type="application/x-shockwave-flash" id="live_embed_player_flash" data="http://www.twitch.tv/widgets/live_embed_player.swf?channel=athenelive"><param name="wmode" value="opaque" /><param name="allowFullScreen" value="true" /><param name="allowScriptAccess" value="always" /><param name="allowNetworking" value="all" /><param name="movie" value="http://www.twitch.tv/widgets/live_embed_player.swf" /><param name="flashvars" value="hostname=www.twitch.tv&channel=athenelive&auto_play=false" /></object>
                </div>
                <div class="videobox">
                    <object class="boxshadowsmaller" width="360" height="240" type="application/x-shockwave-flash" id="live_embed_player_flash" data="http://www.twitch.tv/widgets/live_embed_player.swf?channel=athenelive"><param name="wmode" value="opaque" /><param name="allowFullScreen" value="true" /><param name="allowScriptAccess" value="always" /><param name="allowNetworking" value="all" /><param name="movie" value="http://www.twitch.tv/widgets/live_embed_player.swf" /><param name="flashvars" value="hostname=www.twitch.tv&channel=athenelive&auto_play=false" /></object>
                </div>
            </div>
        </div>
        <div class="mainright boxshadowsmaller">
        </div>
    </div>

css-

        html
        {
            overflow: hidden;
        }

        body
        {
            height: 100%;
            margin: 0;
            padding: 0;
            background-color:white;
            font: 12px "Helvetica Neue",Helvetica,Arial,sans-serif;
        }

        /* GENERIC */

        .clear
        {
            clear: both;
        }

        .border
        {
            border-radius: 5px;
            border: 6px solid rgba(255, 204, 0, 0);
        }

        .boxshadowsmaller
        {
            box-shadow: 2px 3px 20px -3px #000000;
        }

        /* STRUCTURE */

        .header
        {
            position: relative;
            height: 120px;
            width: 100%;
            margin: 10px 15px 15px 15px;
            background-color: orange;
        }

        .mainleft
        {
            position: absolute;
            width: 290px;
            height: 100%;
            left: 15px;
            background-color: blue;
            z-index: 3;
        }

        .maincenter
        {
            position: absolute;
            height: 100%;
            max-width: 1290px;
            min-width: 390px;
            left: 315px;
            right: 315px;
            z-index: 2;
            background-color: white;
        }

        .mainright
        {
            position: absolute;
            width: 290px;
            height: 100%;
            right: 15px;
            background-color: red;
            z-index: 1;
        }

        #videowrapper
        {
            max-width: 1290px;
            min-width: 360px;
            padding-top: 15px;
            text-align: center;
        }

        .videobox
        {
            display: inline-block;
            padding: 5px 5px 5px 5px;
        }

        .page
        {
            position: absolute;
            height: 100%;
            left: 0;
            right: 0;
            z-index: 2;
            background-color: yellow;
        }

左と中央の div は、ページの左側に絶対とマージンで固定されていても問題ありません。しかし、右の div が問題を引き起こしています。ブラウザの横サイズを縮小したときにちゃんと「スタック」する方法がわかりません。中央と左の div の後ろにあります。左と中央のものと同じように、スタックしてウィンドウの側面から押し出されるはずです。

また、ヘッダーの margin-right が適用されていない理由がわかりません。

そして、縦のオーバーフローのヤバさを実感。最初にスタッキングが適切に機能するようにしたいだけです。:]

ありがとう！

4

2 に答える 2

0

ヘッダーの右側の余白を次のように修正しました

.header{ width: auto; }

そして、スタッキング/オーバーフローを変更して解決しました

#page{ min-width: VALUE;)

ここで、VALUE = レイアウト全体の余白と最小幅の合計です。

http://jsfiddle.net/JPt3X/4/

于 2013-06-29T21:42:21.813 に答える