DIV 위치 - div 안에 2 divs

Question

무엇이 잘못 되었나요? 해결할 수 있도록 도와주세요. div divs 중 하나를 볼 수 있으므로 div divs 백분율 폭을 안에 넣어야합니다.

<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

문제는 하위 DIV 경계 속성이라고 생각합니다. 각각 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 % 이상입니다. 바깥 쪽 div에 100px의 고정 너비를 사용하면 안쪽 div에 대해 50 % 대신 고정 너비를 사용할 수 있으며 정상적으로 작동해야합니다.

Answer 3

50 % 크리스토퍼 answer는 box model 세트 각 상자 @에 이어 폭 는는 테두리의 각 상자에 6 픽셀을 추가합니다.

CSS3는

여기 당신이 무엇을해야 할 새로운 상자 크기를 사용할 수있는 방법을 보여줍니다 jsfiddle에 대한 예제가 있다고 제어 할 수 있습니다 box-sizing을 소개합니다. caniuse.com에 따르면 IE6 또는 IE7에서는이 기능이별로 도움이되지 않으며 Firefox 용으로 -moz 접두사를 사용해야합니다.