排队两套

我有一个页面布局如下所示列... http://jsfiddle.net/k55DE/排队两套

我需要的是两个粉色列的左边缘总是排队无论屏幕有多宽。边栏容器总是300像素宽，

感谢所有帮助

<!doctype html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <title>Example</title> 
    </head> 
    <body> 

    <div id="toolbar"> 
     <div id="nav">NAVIGATION</div> 
     <div id="search">SEARCH</div> 
    </div> 
    <div id="site"> 
     <div id="content">CONTENT</div> 
     <div id="sidebar">SIDEBAR</div> 
    </div> 

    </body> 
</html>

#toolbar { 
    margin-bottom:10px; 
    overflow:auto; 
} 

#toolbar #nav, 
#toolbar #search { 
    float:left; 
} 

#toolbar #nav { 
    background-color:#ddffdd; 
    min-height:30px; 
    text-align:right; 
    width:66%; 
} 

#toolbar #search { 
    background-color:#ffdddd; 
    min-height:50px; 
    width:34%; 
} 



#site { 
    margin:0 auto; 
    overflow:auto; 
    width:800px; 
} 

#site #content, 
#site #sidebar { 
    float:left; 
    min-height:300px; 
} 

#site #content { 
    background-color:#ddffdd; 
    text-align:right; 
    width:70%; 
} 

#site #sidebar { 
    background-color:#ffdddd; 
    width:30%; 
}

来源

2012-07-02 michael

链接不工作！ – shareef

@shareef：看起来像jsFiddle已关闭。 – Marcel

-1这就是为什么你在问题中放置相对代码而不是外部资源。 –

解决这个最简单的方法是确保绿色区域的右侧是始终排队。从理论上讲，这可以通过使绿色区域始终具有相同的大小来完成。不幸的是，这比其他方式要困难得多，因为上面的绿色区域具有百分比宽度（66％），而较低的绿色区域具有明确的宽度（800px或〜560px的70％）。哦，下面的绿色区域居中。

因为较低的“内容”区域已经被居中（利润率左和余量右是汽车），在左边的余量将是基于所述浏览器窗口的大小一些固定量。（约（浏览器的宽度 - 800）/ 2）由于此值取决于你的浏览器在渲染时的宽度，你无法确定纯CSS这个金额，将需要使用JavaScript来迫使这些排队。

的JavaScript将需要执行以下操作：

确定左边距的宽度（浏览器的宽度 - 800像素）/ 2，近似。
设置上部绿色部分的宽度为边缘宽度（如在1计算）+ 800像素。设置粉红色的上半部分以水平填充其余部分。
添加监听到窗口大小调整动作，并重复1和2每一个被调整大小的窗口的时间以上。

如果底部不居中，或顶部也有相同的居中/大小适用，这将会更简单。然后你就可以申请一个纯粹的CSS解决方案。

来源

2012-07-02 14:53:22

回答

相关问题