Лучший способ (или альтернатива) для расчета пикселей и% в CSS?

Question

Я не говорю, что мне лень заниматься математикой, но есть ли лучший способ выполнить эту задачу: У меня есть страница с шириной: 960 пикселей, внутри она имеет 2 деления, ширина: 50%. Это довольно просто, но если я хочу добавить 1px рамку, мне нужно вычислить 960 / 0.5 минус дополнительные пиксели границ, они должны быть 4px, но странным образом они считаются 2px (слева и справа от 2 делений справа?) Кроме того, когда я добавляю поля и отступы, мне приходится все заново вычислять. Допустим, я добавляю 10px margin, мне нужно конвертировать% в px, и иногда это дает мне надоедливые цифры, например 760.25px. Я хотел бы знать, если вы используете лучший подход или нет необходимости делать это так. Спасибо.

Answer 1

Если вы используете фиксированную ширину контейнера, зачем вам использовать% для внутренних DIV. Это не имеет никакого смысла, если вы не используете проценты. Конечно, вы можете использовать размер окна, но это повредит старые браузеры.

Answer 2

Вы можете добавить больше элементов для определения размера:

<div style="width:960px;overflow:hidden;">
  <div style="float:left;width:50%;">
    <div style="margin:5px;border:1px solid #000;padding:5px;"></div>
  </div>
  <div style="float:left;width:50%;">
    <div style="margin:5px;border:1px solid #000;padding:5px;"></div>
  </div>
</div>

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

Answer 3

Если у ваших "дивов" есть фоновое изображение, вы можете взломать, интегрировав границу в фоновое изображение.

Но если ваши "div" имеют фиксированную ширину, вы должны рассчитать ширину, чтобы не было сюрпризов с другими веб-браузерами.

Answer 4

CSS-свойство размера блока (если вам не важно IE <8) </p>