3列布局问题

Question

我有三列布局问题。

问题：我已经为“left”和“right”div设置了“position：fixed”。当我重新调整窗口大小时，“右”div与“中心”div重叠。

我需要“右”div不应该与“center”div重叠。

这是可能的吗？

HTML：

<div id="master"> 
<div class="left-div">Lorem ipsum..</div> 
<div class="center-div">Lorem ipsum..</div> 
<div class="right-div">Lorem ipsum..</div> 
</div> 

CSS：

#master{ 
    width:100%;  
    } 

.left-div{ 
    width:150px; 
    background:red; 
    height:500px; 
    position:fixed; 
    left:0; 
    top:0;  
    } 

.center-div{ 
    width:640px;  
    background:yellow; 
    height:500px; 
    margin-left:170px; 
    float:left; 
    } 

.right-div{ 
    width:300px; 
    background:green; 
    height:500px; 
    position:fixed; 
    right:0; 
    top:0; 
    } 

Answer 1

你可以用以下

.center-div{ 
    background:yellow; 
    height:500px; 
    margin-left:170px; 
    margin-right:320px; 
    } 

调整中心格但这样会在小屏幕重叠，因为你需要使用媒体查询

working jsFiddle File

Answer 2

[检查此链接-DEMO]http://jsfiddle.net/GopsAB/XL4Y4/

在百分比指定宽度。它会解决你的问题。

#master 
{ 
width:100%;  
} 

.left-div 
{ 
width:20%; 
background:red; 
height:500px; 
position:fixed; 
left:0; 
top:0;  
} 

.center-div 
{ 
width:50%;  
background:yellow; 
height:500px; 
margin-left:20%; 
float:left; 
} 

.right-div 
{ 
    width:30%; 
    background:green; 
    height:500px; 
    position:fixed; 
    right:0; 
    top:0; 
} 

它适用于所有大小的窗口，因为宽度是以百分比指定的。

Answer 3

您必须指定每个元素的确切位置和大小（使用左侧和顶部等相同属性），以保留元素的原始位置和大小而不重叠。由于屏幕尺寸不同，这并不明智。你应该使用position：absolute而不是fixed。通过javascript（或jquery），您可以获得当前的屏幕宽度并为每个元素提供一个首选的部分。