混合百分比和像素为3-col布局

Question

  

可能重复：
  Three Column Layout side columns elastic middle fixed

我正在使用90％的屏幕宽度的包装来构建网页。在包装器中，我将有3列。

• 包装纸是屏幕尺寸的90％宽度。
• 中间栏是500PX
• 左列是中间柱后剩余空间的60％。
• 右列是中间柱后剩余空间的40％。

我遇到了如何将左右列设置为正确宽度的问题。 有谁知道解决这个问题的聪明方法。

Answer 1

您可以通过javascript执行此操作。 首先，你必须得到顶部div的px高度

var top = $('#top').width();

在此之后，您必须计算该宽度与从底部具有中间div的500px之间的差异：

var sum = top - 500;

在此之后你必须计算左下方divs + margin的宽度（我将其设置为10px）：

var left = (sum * 60)/100 - 10;
var right = (sum * 40)/100 - 10;

在决赛中你必须在2个div上应用宽度：

$('#left').width(left);
$('#right').width(right);

您可以查看我在此处创建的示例：http://jsfiddle.net/paulalexandru21/LceLw/1/

PS。如果您没有很好地看到布局，则需要拖动它，您将看到所有3个列的确切位置。