Question

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

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

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

我创建了jSfiddle here，因此您可以自己试验。

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

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

目前我的左侧宽度为65％，右侧为35％，使用额外的.left＆amp; .right课程。

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

我的问题是，我的2列之间需要10px的余量。目前，我的列宽总计达到100％，以填充整个白框。

如果我向左侧列添加10px填充权限。然后布局中断，添加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 */
    });
});

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

1 个答案: