CSS百分比和像素布局相结合 [英] CSS percentage and pixel layout combined

问题描述

我有一个宽度为1260px的CSS DIV叫做包装器（wrapper） ：

  #wrapper {
 width：1260px; 
 
 
 
 
 
 $ b 
在这个包装器DIV中，我有三个DIV称为column-left，column-mid ，和列右： 
 
 
 ＃column-left {
 width：245px; 
 float：left; 
} 
 
＃column-mid {
 width：55.55555555555556％; / *（700px / 1260px）* / 
 float：left 
 margin-left：35px; 
 margin-right：35px; 
} 
 
＃column-right {
 width：245px; 
 float：left; 
} 
  
非常简单，它是一个包装div中的三列布局。中间的divcolumn-mid设置了一个百分比宽度。它应该是700px宽，这是1260px（包装div的宽度）的55.55555555555556％。
 
 
 
这个分辨率看起来很好。但是，如果我将包装div的宽度更改为1400px，则column-mid div不会展开以正确填充空间。它的等效宽度只增加到775像素，实际上它应该填充794像素，因为794像素是55.55555555555556％1430像素。为什么column-mid div只能达到775像素？我试图实现的是，左列和右列保持固定大小（245px），但中间列应相对于包装div的大小增加。
解决方案
为什么不尝试这种方法： http://jsfiddle.net/Er8uX / 2 /   
 
 
  #wrapper {
 width：1260px; 
 border：1px solid #ddd; 
 overflow：hidden; 
职位：亲属; 
} 
＃column-left {
 width：245px; 
位置：绝对; 
剩下：0; 
 border：1px solid＃f0f; 
} 
 
＃column-mid {
 margin：0 280px; 
 border：1px solid＃00f; 
} 
 
＃column-right {
 width：245px; 
 border：1px solid＃f0f; 
位置：绝对; 
身高：100％; 
 right：0; 
} 
  
我想这就是你想要的，基本上：固定左右栏，主要内容根据包装宽度。我用绝对定位来保持它们;如果你有一个带有背景的列，并且想要它一直向下运行，那么左侧的高度根据内容的不同而有所不同。
 
I'm really struggling with this, if anyone could help my eternal thanks goes out to you.

I have a CSS DIV with a width of 1260px called wrapper:
#wrapper {
width: 1260px;
}
Inside this wrapper DIV I have three DIVs called column-left, column-mid, and column-right:
#column-left {
width: 245px;
float: left;
}

#column-mid {
width: 55.55555555555556%; /* (700px/1260px) */
float:left
margin-left: 35px;
margin-right: 35px;
}

#column-right {
width: 245px;
float:left;
}
Very simply, it is a three column layout within a wrapper div. The middle div "column-mid" has a percentage width set. It should be 700px wide which is 55.55555555555556% of 1260px (the width of the wrapper div).

It all looks fine at this resolution. However if I change the width of the wrapper div to say 1400px, then the column-mid div is not expanding to fill the space properly. It's equivalent width is only increasing to 775px when really it should be filling 794px because 794px is 55.55555555555556% of 1430px

Why is the column-mid div only going up to 775px? What I am trying to achieve is that the left and right columns stay a fixed size (245px) but the middle column should increase in relation to the size of the wrapper div.
解决方案
Why not try this approach: http://jsfiddle.net/Er8uX/2/
#wrapper {
    width: 1260px;
    border: 1px solid #ddd;
    overflow: hidden;
    position: relative;
}
#column-left {
    width: 245px;
    position: absolute;
    left: 0;
    border: 1px solid #f0f;
}

#column-mid {
    margin: 0 280px;
    border: 1px solid #00f;
}

#column-right {
    width: 245px;
    border: 1px solid #f0f;
    position: absolute;
    height: 100%;
    right: 0;
}
I think this is what you want, basically: fixed left and right column, main content according to wrapper width. I've used absolute positioning to keep them in place; on the right one I've used 100% height if you have a column with a background and want it to run all the way down, the left one has height according to content.

                        
这篇关于CSS百分比和像素布局相结合的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！