CSS 변수 2 열 레이아웃

Question

그래서 인터넷 전체에서 물건을 찾았는데 내가 찾고있는 답변을 찾을 수 없습니다.

저는 각 열이 컨테이너의 50 %와 동일한 너비 인 내 페이지의 일부분에 대해 2 열 레이아웃을 만들려고합니다.

이제는 두 div를 모두 50 %로 설정하고 float : left를 설정하면 두 번째 div가 아래를 감싸고 있습니다. 내가 얻을 수있는 가장 가까운 것은 두 번째 div를 오른쪽으로 띄우고 너비를 49 %로 만드는 것입니다.하지만 내가 만지게하고 싶기 때문에 50 %로하고 싶습니다. 그래서 내가 뭘 잘못

JSFiddle Example

: 여기

는 데모입니까?

Answer 1

#textBooks 당신은 당신의 DIV 년대에 국경을 정의합니다. 어느쪽에 폭을 더합니까? 예 : 5 0% + 2px. 따라서 상자 크기를 사용하십시오 : border-box; 이 같은

쓰기 :

div#textBooks, 
div#info{ 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
} 

확인이 http://jsfiddle.net/VbWbc/4/

참고 :이 작업의 위 IE8 &까지입니다.

div#info{ 
    width:50%; 
    border:1px solid black; 
    background-color:red; 
    float:left; 
} 

div#textBooks{ 
    border:1px solid black; 
    background-color:green; 
    overflow:hidden; 
} 

Answer 2

국경 너비가 1px로 설정되어 있으므로 두 개의 각 추가 주소에 두 개의 추가 번호가 추가됩니다 (div). 따라서 귀하의 콘텐츠는 너비가 4px이므로 너울 맞습니다. div.

div의 내용을 다른 div에 넣고 내면을 div에 적용하면됩니다. this fiddle에서 볼 수 있습니다.

Answer 3

사용 CSS3 box-sizing: border-box;

는 #inf O를 this-

-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
-o-box-sizing: border-box; 
box-sizing:border-box; 

를 추가하고 Fiddle