jQuery 或数学使用宽度百分比减去 div 的像素 - jSfiddle

Question

http://jsfiddle.net/motocomdigital/7fyvn/1/

您好，这是一个问题我真的很难找到答案。

它不一定是 jQuery，它可能是一些简单的 css。

我在这里创建了jSfiddle，以便您可以自己进行实验。

我的情况是我有一个可变宽度容器，在小提琴中称为 div#container 。

在这个容器内，我有两列。列宽由百分比确定。

目前，我使用附加的 .left & ，左侧宽度为 65%，右侧宽度为 35%。 .right 类。

即使我在 .column 类上使用 width: 50% ，我也会遇到同样的问题。

我的问题是，我的两列之间需要 10 像素的边距。目前我的列宽度总计为 100%，以填充整个白框。

如果我向左列添加 10px padding-right。然后布局就会中断，添加 margin-right 也会发生同样的情况。

我的问题是，如何使用 jQuery 或 javascript 从每个列宽度中减去 5px？同时仍然保留我的宽度百分比？

这在某种程度上是可能的还是我在做梦。 javascript数学可以吗？我可以设想，但我想不出从哪里开始，或者什么方法最安全、最轻便。

它将在手机浏览器上使用，因此当方向从横向翻转为纵向时，javascript 减法需要保持真实，同时允许调整百分比宽度。

希望这是有道理的，请随时向我询问更多信息。

---

更新解决方案

请参阅此处仅使用 css 和额外的 div 解决的小提琴... http:// /jsfiddle.net/7fyvn/4/

您可以调整窗口大小，装订线始终保持不变，距左栏 -20px。请参阅类 .new-div 和 .text-padding

Answer 1

一种可能的方法是添加：

$(document).ready(function () { /* standard jQuery document ready */
    $("div.white-box").each(function(){ /* not optimal, but allowing for each white box to be a different width on the page */
        var width = $(this).width(), /* get the width of the white-box */
            left = $(this).find("div.left"), /* find the left column */
            right = $(this).find("div.right"); /* find the right column */
        left.width((width - 10) * 0.65).css('padding-right','10px'); /* set the left column to 65% of total minus 10 pixels and then pad those pixels back on to provide spacing */
        right.width((width - 10) * 0.35); /* set the right column to 35% of what is left after taking 10 pixels away from the total */
    });
});