인라인 div 2 개 모두 50 % 폭 축소?

Question

두 div를 50 % 너비로 나란하게 만들려면 어떻게해야합니까?

DEMO

HTML

.pix{ 
    display:inline; 
} 

댓글 바랍니다

<div class="big_div"> 
    <div class="pic_1 pix"> 
     <img src="pic1" width="50%" height="30%"/> 
    </div> 
    <div class="pic_2 pix"> 
     <img src="pic2" width="50%" height="30%"/> 
    </div> 
</div> 

CSS 오른쪽 단계에서 어떤 논리 도움이됩니다.

Answer 1

당신은 당신이 display: table 기술을 사용할 수있는 수레를 사용하지 않으려면 어쨌든를 heres 예. 그것은 당신이 더 많이 계속 추가 할 수있게 할 것이고 그들은 컨테이너 전체에 완벽하게 맞을 것입니다.

이미지의 인라인 비율 너비와 높이를 제거해야합니다. 당신이 float를 사용하지 않을 경우

.big_div { 
    display: table;  
} 
.pix{ 
    display: table-cell; 
    width: 1%; 
    vertical-align: middle; 
} 

img { 
    width: 100%; 
    height: auto; 
} 

Demo

Answer 2

Working fiddle

나는 당신의 html에 조금 변경하고 사용했습니다이 css :

.big_div {  
    width: 100%; 
    height: 100%; 
} 

img { 
    width:50%; 
    height:30%; 
    float: left; 
} 

또는 당신은 display: inline-block를 사용하여 부모 요소

Fiddle

Answer 3

을에 font-size:0을 설정할 수 있습니다 너비를 설정하지 마십시오 & heig ht 이미지 태그에. 100 %로 유지하면 이미지를 왜곡합니다.

.pix 클래스의 너비를 50 %로 설정하고 왼쪽 또는 오른쪽으로 부순다. 인라인 & 너비를 유지할 수 없습니다. div는 표시 상태를 유지해야합니다. 레이아웃을 차단하려면 div.

http://jsfiddle.net/bamboo/T3p7h/1/

.big_div { 
    width: 60%; 
    margin: 0 auto; 
    background: #00B7FF; 
} 

.pix { 
    width: 50%; 
    float: left; 
} 

Answer 4

, (여기에 JSFiddle입니다.) display:inline-block를 사용

CSS

우리가 설정해야

.big_div { font-size:0; } 

.pix{ 
    display:inline-block; 
    width:50%; 
} 

.pix img { width:100%; } 

폰트 사이즈를 0으로합니다. 그렇지 않으면 div 사이에 공백이 생깁니다 (more information).