2013-06-29 140 views
0

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。它应该叠起来,然后像左侧和中央一样从窗户的侧面推开。

此外,我不知道为什么标题页边距没有被应用?

而且我意识到了垂直溢出的恶心。我只是想先堆叠才能正常工作。 :]

谢谢!

回答

0

也许

.maincenter { width: 100%; } 

可以帮助?

0

我已经固定在头右侧边缘具

.header{ width: auto; } 

而且通过改变

#page{ min-width: VALUE;) 

其中VALUE =我的边缘和整个最小宽度之和解决了堆叠/溢出布局。

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