1

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

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

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

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


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

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

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

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

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

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

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

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

它将用于手机浏览器，因此当方向从横向翻转到纵向时，javascript 减法需要保持正确，同时允许调整百分比宽度。

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

更新解决方案

只需使用 css 和一个额外的 div 就可以在此处查看已解决的小提琴... http://jsfiddle.net/7fyvn/4/

您可以调整窗口大小，并且装订线始终保持不变，离开左列-20px。查看课程.new-div和.text-padding

4

1 回答 1

4

一种可能的方法是添加：

$(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 */
    });
});
于 2012-01-10T00:38:31.643 回答