Как установить внутреннюю ширину div в процентах с полем

Question

Как установить внутреннюю ширину div в процентах с полем

0

Я работаю над мобильной версией для своего сайта, и я сталкиваюсь с проблемой. У меня есть внешний div, который я хочу растянуть по всей ширине, а затем я хочу, чтобы 4 div внутри этого были одинаковой ширины с разницей между ними.

Это было бы легко, если бы мне не нужна разница между ними. Я бы просто установил width:25% и покончил с этим, но я хочу 3 пикселя между ними. Когда вы установите этот запас, фактическая ширина будет более 100%, поэтому в div будет больше одной строки.

Я думал о попытке установить отрицательный margin-left, но это просто избавляет от поля справа.

CSS:

.wrapper {
width:300px;
height:50px;
background-color:#f00;
}

.inner {
width:25%;
margin-right:2px;

float:left;
background-color:#00f;
}

И вот скрипка, чтобы вы могли точно видеть, что я имею в виду.

Кстати, я знаю, что я мог бы использовать некоторые jQuery или JavaScript для выполнения этого после загрузки страницы, но я хотел знать, есть ли для этого способ исключительно CSS.

jas7457 13 дек. 2013, в 23:10

Источник

Теги:

html

css

5 ответов

Ещё вопросы

Josh Crozier · Answer 1 · 2013-12-13T19-19-00.000Z

Вы можете использовать calc() для вычитания 2px из ширины элементов.

Пример jsFiddle

.inner {
    width:calc(25% - 2px);
}

Однако это приводит к краю 2px для последнего элемента. Чтобы исправить это, добавьте:

Пример jsFiddle

.inner:last-child {
    width:25%;
    margin-right:0;
}

Кроме того, вы можете просто использовать процентные поля.

Это именно то, что я искал! Я понятия не имел об этой функции «calc» в css. Знаете ли вы, будет ли это поддерживать значение, которое он первоначально рассчитывает, или он обновляется, если изменяется разрешение экрана (например, при переключении с книжного на альбомный режим будет ли корректно обновляться ширина?)
Обновлено но единственное о совместимости IE> = 9
@ jas7457 Это обновит. Вот пример - измените размер браузера, чтобы он динамически обновлялся в зависимости от процента ширины. Кроме того, как указывает Данко, он не поддерживается IE8 и ниже, но я действительно не стал бы беспокоиться об этом.

G-Cyr · Answer 2 · 2013-12-13T19-36-00.000Z

вы можете использовать border и box-sizing чтобы включить этот пробел 2px в пределах вашей 25-процентной ширины.

Если фон не является обычным цветом, граница должна быть прозрачной, а цвет фона - теней вставки.

.inner {
    width:25%;
    border-right:2px solid transparent;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    float:left;
 box-shadow:inset 0 0 0 10000px #00f;/* make it big , so it doesnt matter wich size it becomes.*/
}

http://jsfiddle.net/g5mgD/4/ ширина фонового изображения и полупрозрачный цвет http://jsfiddle.net/g5mgD/9/

user3100889 · Answer 3 · 2013-12-13T19-10-00.000Z

Вы можете сделать столбцы разбросаны на 24% и сделать маржу на основе% между ними.

.wrapper {
    width:100%
    height:50px;
    background-color:#f00;
    overflow:hidden;
}

.inner {
    width:24%;
    margin:0 .5%;
    float:left;
    background-color:#00f;
}

Lloyd Banks · Answer 4 · 2013-12-13T18-43-00.000Z

Вы также можете использовать% для своих полей. IE:

margin: 0 0 0 1%;

Просто не забудьте компенсировать запас с уменьшением ширины. Таким образом, вместо 25% для "внутреннего" класса вы использовали бы 24% для реализации вышеуказанного поля.

Скрипка, включающая вышеприведенную

srrvnn · Answer 5 · 2013-12-13T19-42-00.000Z

Я бы разделил 100% внутри элементов и поля следующим образом:

.inner {
    width:24%;        
    margin: 0.5%;    

    float:left;
    background-color:#00f;
}

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