http://jsfiddle.net/JPt3X/2/堆叠/ 3周的div [左=静态] [中心=流体] [右=静态]
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都ok被固定在页面左侧绝对和保证金。但正确的div给我带来麻烦。当你缩小浏览器的水平尺寸时,我不确定如何正确地“堆叠”。它落后于中心并离开了divs。它应该叠起来,然后像左侧和中央一样从窗户的侧面推开。
此外,我不知道为什么标题页边距没有被应用?
而且我意识到了垂直溢出的恶心。我只是想先堆叠才能正常工作。 :]
谢谢!