DIV position - 2 divs in div

Question

Что я делаю неправильно - пожалуйста, помогите мне исправить его Все, что я делаю, это положить в div div div div с шириной , как вы можете видеть, что один из divs получает из DIV

<div style="border: 3px solid black; float: right; height: 27px; width:100px"> 

    <div style="position: relative;border: 3px solid black; float: right; height: 27px; width:50%">1</div> 
    <div style="position: relative;border: 3px solid black; float: left; height: 27px; width:50%">1</div> 


    </div> 

Answer 1

Я думаю, что проблема заключается в атрибуте border вашего дочернего DIVs. Каждый из них имеет границу 6px. Попытайтесь удалить границу и снова проверьте ее. Также вам не нужно указывать относительные значения их позиции. Попробуйте этот код и скажите мне результат здесь.

<div style="border: 3px solid black; float: right; height: 27px; width:100px"> 
    <div style="float: right; width:50%">Right div</div> 
    <div style="float: left; width:50%">Left div</div> 
</div> 

Answer 2

Они не подходят из-за границы. 50% + 50% + 12px граница более 100%. Если вы используете фиксированную ширину 100 px для внешнего div, вы можете использовать фиксированную ширину 44px вместо 50% для внутренних div и она должна работать нормально

Answer 3

Следуя от @ Кристофера answer, то box model устанавливает каждый ящик на 50% в ширину, затем добавляет 6px на каждую коробку на границе.

CSS3 вводит box-sizing, что позволяет контролировать, что

Вот пример на jsfiddle, который показывает, как можно использовать новую проклейки коробку, чтобы делать то, что вам нужно. Согласно caniuse.com, вам не повезло с этим в IE6 или IE7, и вам нужно будет поместить префикс -moz для Firefox.