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 的后面。它应该堆叠，然后像左边和中间的一样被推离窗口的一侧。

另外，我不确定为什么没有应用页眉边距？

我意识到垂直溢出令人讨厌。我只想让堆叠首先正常工作。:]

谢谢！

4

2 回答 2

0

也许

.maincenter { width: 100%; }

有帮助？

于 2013-06-29T03:24:48.517 回答
0

我已经修复了标题右侧边距

.header{ width: auto; }

并通过改变解决了堆叠/溢出

#page{ min-width: VALUE;)

其中 VALUE = 是我的边距和整个布局的最小宽度的总和。

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

于 2013-06-29T21:42:21.813 回答