Установить div outerwidth с помощью css

интересно, есть ли способ установить outerwidth на div С помощью css игнорировать отступы и границы.

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

редактировать
Не хочу добавлять еще один дополнительный элемент

10
css

5 ответов

мне интересно, есть ли способ установить outerwidth 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

23

гнездо другой div внутри вашего и примените прокладки/границы к вложенному:

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

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

3

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

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

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

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

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

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

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

вы можете разделить значение 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 и добавит дополнительную нагрузку на браузер вашего клиента - подумайте о мобильном телефоне, и вы увидите, почему производительность считается!

0