Как управлять границей, заполнением, разностью с динамическим размером (в процентах)?

Question

Мой вопрос в том, как управлять размером элемента (скажем, div) с процентом. У меня есть ситуация, когда я сделал два div, плавающих бок о бок, и оба берут 50% от div, который их содержит. Каждый из этих двух div имеет границы 1px, margin 5px и некоторые дополнения. Итак, как я должен управлять этими статическими размерами и динамическим размером контента (divs). Причина в том, что я только что упомянул, они не будут плавать бок о бок из-за границ, отступов и полей, которые делают размер более (100%).

Каковы решения? В моем случае размеры маржи/отступов/границ небольшие, поэтому, я думаю, я мог бы просто установить размер чуть ниже (например, 45%) и надеюсь, что он подойдет. Но я думаю, что этот метод неаккуратный, так как если бы я установил размер прокладки выше, мне придется настроить размер div с помощью проб и ошибок, пока я не найду идеальный размер. Есть ли правильный способ достичь этого?

Большое спасибо.

Answer 1

Чистая работа может быть сделана, сделав два плавающих дивы с 0 наценки и 0 границы, только ширина на уровне 50%. Затем внутри каждого вы можете поместить div, который соответствует его контейнеру, со статическим запасом и отступом.

В качестве альтернативы вы можете сохранить все динамическое, так что поставьте что-то вроде margin: 1%, вы получите приятное поведение при изменении размера окна!

Answer 2

От https://developer.mozilla.org/En/CSS/Box-sizing

/* support Firefox, Safari/WebKit, Opera and IE8+ */ 

.example { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing:  border-box; 
} 

вы можете использовать окно-размерный: пограничный ящик так, что 50%, то применяется к внутренним + дополнениям + границе, но, к сожалению, не установкам, чтобы добавить запас.

Однако вы можете использовать div внутри div и использовать прокладку на внешнем div, чтобы имитировать маржу.

вот пример JSFiddle