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

Question

<分区>

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/

附言。如果您看不清布局，则需要拖动它，您将看到所有 3 列完全符合您的要求。