固定左侧的3列布局的问题 [英] Problems with a 3 column layout with fixed left side

问题描述

我有一个问题，使3列布局。我已经尝试所有的例子现在在线 - 使用谷歌。这似乎没有解决我的问题。

我试图做的是容易有知识的人。

1. 制作覆盖整个屏幕的3列流体布局。


2. 左列的宽度应为230像素，固定的高度为100％。


3. 中心列和右列的宽度应相等。





出来。中间列向左移动，并在中间列和右列之间产生巨大的白色间隙。





这是我的问题。


$ b $




我如何解决这个问题？





您可以在这里查看我的尝试： 小提琴





只要缩小，您就会立即看到问题。需要帮助来解决这个问题。如何？





如果我在宽度设置为100％的中心列中使用div包装，就会出现另一个问题。将发生与上述相同的问题。





我不能使用 overflow：hidden 因为我需要 - 稍后 - 使用中心列右侧的绝对div来设置一个指向右列的图像箭头。

解决方案

您的意思是更像这样： http://jsfiddle.net/gbRzM/ ？
（使用left，right和width属性定位所有内容）

  .left {
 width：230px ; 
 position：fixed; 
 background：GREEN; 
} 
 
 .right {
 right：0; 
 width：30％; 
 position：fixed; 
 background：RED; 
} 
 
 .center {
 left：230px; 
 right：30％; 
 position：fixed; 
 border：1px solid; 
 background：YELLOW; 
} 
  



或更精确地说： http://jsfiddle.net/HKJvP/ ？
（将中心和右侧放在新div中，以便像素和％可以混合，允许指定的宽度相等）

  .left {
 width：230px; 
 position：fixed; 
 background：GREEN; 
} 
 
 .notleft {
 left：230px; 
 height：100％; 
 right：0; 
 position：fixed; 
} 
 
 .right {
 right：0; 
 width：50％; 
 position：absolute; 
 background：RED; 
} 
 
 .center {
 left：0; 
 width：50％; 
 position：absolute; 
 border：1px solid; 
 background：YELLOW; 
} 
  




I have a problem making a 3 column layout. I have tried all examples now online - used Google. None of this seems to solve my problem.

What I try to do is easy for people with knowledge.

1. Make a 3 column fluid layout that cover the whole screen.
2. Left column should be 230px width, fixed, height 100%.
3. Center column and right column should be equal width.
4. For both center - and right column they have to "float" into each other

Problem occur when you zoom out. Center column run away to left and make a huge white gap between center column and right column.

That is my problem.

center and right column need to be close to each other - no gap.

How can I solve this?

You can see my attempt here: Fiddle

Just zoom out, and you see the problem straight away. Need help to fix this. How?

Another problem occur if I use a div wrapper inside the center column with width set to 100%. Same problem as described above will happened. The text in both left and right column need to be float as well.

I can't use overflow:hidden because I need to - later - use a absolute div on right side of the center column to set a image arrow pointing to right column.

解决方案

You mean something more like this: http://jsfiddle.net/gbRzM/? (uses left, right and width properties to position everything)

.left {
    width: 230px;
position:fixed;
    background:GREEN;
}

.right {
    right:0;
    width:30%;
    position:fixed;
    background: RED;
}

.center {
    left:230px;
    right:30%;
    position:fixed;
    border:1px solid;
    background:YELLOW;
}

Or more accurately this: http://jsfiddle.net/HKJvP/? (puts center and right in a new div, so that pixels and % can be mixed, allows equal width that you specified)

.left {
    width: 230px;
    position:fixed;
    background:GREEN;
}

.notleft{
    left:230px;
    height:100%;
    right:0;
    position:fixed;
}

.right {
    right:0;
    width:50%;
    position:absolute;
    background: RED;
}

.center {
    left:0;
    width:50%;
    position:absolute;
    border:1px solid;
    background:YELLOW;
}

这篇关于固定左侧的3列布局的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！