Html 3列版面问题

我对三栏布局有意见

问题：我已经为“左”和“右”div设置了“位置：固定”。当我重新调整窗口大小时，“右”div与“中心”div重叠

我需要的“右”div不应该重叠到“中心”div

这可能吗

HTML:

---

[查看此链接演示]

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

#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;
}

---

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

您必须指定每个元素的确切位置和大小（使用相同的属性，如“左”和“上”），以便保留元素的原始位置和大小，而不重叠。这是不明智的，因为屏幕大小不同。您应该使用位置：绝对，而不是固定。使用javascript（或jquery），您可以获得当前屏幕宽度，并为每个元素指定其首选部分。

您可以使用以下命令调整中心div

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

但这会在小屏幕上重叠，对于小屏幕您需要使用媒体查询

---

想要这样吗？只有这样。但我需要为“左”和“右”设置“位置：固定”。之后，当我在“1024px”结果下调整窗口大小时，我需要水平滚动条。那样的话。“右”部分不应与“中”部分重叠。这可能吗？你检查过我的答案了吗？是的。我明白了。但我需要为“Right”和“Left”div设置像素宽度。这可能吗？@user3839302不可能。他用html和css标记的所有屏幕都无法使用它。不是jquery或Javascript

#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;
}

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