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

Question

可能重复：
三列布局侧列弹性中间固定

我正在构建一个包含屏幕宽度 90% 的包装器的网页。在包装器中，我将有 3 列。

• Wrapper 是屏幕尺寸的 90% 宽度。
• 中间一栏是500PX
• 左列是中间列之后剩余空间的 60%。
• 右列是中间列之后剩余空间的 40%。

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

Answer 1

您可以从 javascript 执行此操作。首先，您必须获取顶部 div 的 px 高度

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

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

var sum = top - 500;

在此之后，您必须计算左右底部 div + 边距的宽度（我已将其设置为 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 列正是你想要的样子。