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），您可以獲得當前的屏幕寬度併爲每個元素提供一個首選的部分。