<分区>
html - 混合 3 列布局的百分比和像素
Possible Duplicate:
Three Column Layout side columns elastic middle fixed
我正在构建一个网页，其包装占屏幕宽度的 90%。在包装器中，我将有 3 列。
- 包装占屏幕宽度的 90%。
- 中间栏为500PX
- 左栏占中间栏后剩余空间的 60%。
- 右栏占中间栏后剩余空间的 40%。
我在如何将左右列设置为正确宽度方面遇到问题。 有谁知道解决这个问题的聪明方法。
最佳答案
您可以通过 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/
附言。如果您看不清布局，则需要拖动它，您将看到所有 3 列完全符合您的要求。
关于html - 混合 3 列布局的百分比和像素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13315430/