Установите внешнюю ширину div с помощью css

Интересно, есть ли способ установить outerwidth div используя css чтобы игнорировать отступы и границы.

Когда я установил для div ширину 50%, отступы и границы будут добавлены к ширине. Как я могу решить это без javascript или jQuery.outerWidth()?

Не хочу использовать дополнительный элемент

Ответы

Ответ 1

Мне интересно, если есть способ установить внешнюю ширину div, используя css, чтобы игнорировать отступы и границы.

Вы можете использовать box-sizing: border-box чтобы сделать padding и border внутри width:

div {
    box-sizing: border-box;
}

Смотрите: http://jsfiddle.net/thirtydot/6xx3h/

Поддержка браузера: http://caniuse.com/css3-boxsizing

Спецификация: http://www.w3.org/TR/css3-ui/#box-sizing

Ответ 2

Вставьте еще один div внутри вашего и примените paddings/border к вложенному:

<div style="width:50%;"> <div style="padding:5px;">  ....  </div> </div>

К сожалению, для этого нет чисто CSS-метода (или, по крайней мере, я не знаю об этом).

Ответ 3

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

  • Браузер, а не стиль, определяет фактический размер относительных измерений, таких как em и%.
  • Нет единого/стандартного механизма для подачи вычисленных данных из внутреннего механизма компоновки браузера обратно в таблицу стилей (это может быть опасной проблемой цикла).

Воистину, единственный способ сделать это:

  • Используйте фиксированные размеры ширины и добавьте вычисления пикселей в свой стиль.
  • Для достижения результатов используйте JavaScript или соответствующую структуру.

Ответ 4

Я бы просто добавил div внутри этого div, если это возможно.

<div id="outerwidth">
  <div class="inner">
   //Content
  </div>
</div>

.outerwidth { width: 50%; }
.inner { padding: 20px; }

Ответ 5

вы можете разделить значение 50%, присвоенное ширине, как это:

width: 46%;

margin: 0 1%; // 0 top/bottom and 1% each for left and right

padding: 0 1%; // same as above

вы можете пересчитать проценты в соответствии с вашими потребностями, если общая сумма составляет 50%, вы должны быть в порядке.

Я бы не использовал js для исправления небольших косметических проблем, так как это не сработало бы с js off и добавило бы дополнительную рабочую нагрузку в ваш клиентский браузер - подумайте о мобильном телефоне, и вы увидите, почему производительность рассчитывается!