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

Question

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

Answer 1

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

<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 2

коробчатого проклейки CSS свойство (если вы не заботиться о IE < 8)

Answer 3

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

Answer 4

Если ваши «divs» имеют фоновое изображение, вы можете взломать, интегрируя границу в фоновое изображение.

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