jQuery или математика, чтобы вычесть пиксели из div'ов, используя процент по ширине - jSfiddle - PullRequest
Новая
       12

jQuery или математика, чтобы вычесть пиксели из div'ов, используя процент по ширине - jSfiddle

1 голос
/ 10 января 2012

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

Здравствуйте, это вопрос, для которого я действительно изо всех сил пытаюсь найти ответ.

Возможно, это не обязательно jQuery, это может быть простой бит CSS.

Я создал jSfiddle здесь , чтобы вы могли поэкспериментировать сами.

Мое обстоятельство заключается в том, что у меня есть контейнер переменной ширины, называемый в скрипте div#container.

И внутри этого контейнера у меня есть 2 столбца.Ширина столбцов определяется в процентах.

В настоящее время у меня есть левая ширина на 65% и правая на 35%, используя дополнительные классы .left & .right.

Я бы получилта же проблема, даже если я использовал width: 50% в моем .column классе.

Моя проблема в том, что мне нужно 10px поле между моими 2 столбцами.В настоящее время ширина моего столбца в сумме составляет 100%, чтобы заполнить всю белую коробку.

Если я добавлю отступ в 10 пикселей вправо к левому столбцу.Затем макет ломается, и то же самое происходит с добавлением margin-right.

Мой вопрос: как я могу вычесть 5px из каждой ширины столбца, используя jQuery или javascript?Пока еще сохраняется процент для моей ширины?

Возможно ли это каким-то образом или я сплю.Возможно ли это с помощью математики javascript?Я могу предусмотреть это, но я не могу думать, с чего начать, или какой метод самый безопасный и легкий.

Он будет использоваться в браузерах телефонов, поэтому, когда ориентация переходит от пейзажа к портрету, JavaScriptвычитание должно оставаться верным, в то же время позволяя регулировать ширину в процентах.

Надеюсь, это имеет смысл, не стесняйтесь спрашивать меня о дополнительной информации.

ОБНОВЛЕНИЕ РЕШЕНИЯ

См. Решенную скрипку здесь только с помощью css и дополнительного div ... http://jsfiddle.net/7fyvn/4/

Вы можете настроить размер окна, и желоб всегда остаетсято же самое, -20px от левого столбца.Смотрите классы .new-div и .text-padding

1 Ответ

4 голосов
/ 10 января 2012

Одним из возможных способов было бы добавить: 

$(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 */
    });
});
...