div가 축소 될 때만 이동합니다.

Question

stackoverflow에서 빠른 검색을 수행하고이를 해결할 수있는 방법을 찾았지만 아무 것도 작동하지 않습니다.

<div id="product_box"> 
    <div id="pro_img"><img src="images.jpg'" width="140px"/></div> 
    <div id="pro_text"> 

    </div> 
</div> 

내 CSS :

<style> 
    #product_box { 
    border: 1px solid; 
    border-color: #8dd5f6; 
    margin-top: 8px; 
    margin-left: 4px; 
    margin-right: 4px; 
    width: 330px; 
    height: 196px; 
    float:left; 
    } 

    #pro_text{ 
    float:left; 
    width:189px; 
    height: 196px;  
    background-color: #CCC; 
    } 

    #pro_img { 
    float:left; 
    border-right:1px solid #8dd5f6; 
    width:140px; 
    height: 196px; 
    } 
</style> 

#pro_img 왼쪽으로하고 #pro_text는 오른쪽에, 그것은 기본 줌과 높은 줌의에서 잘 작동 나는 내 HTML 코드를 아래와 같이가 하지만 문제는 내가 pro_text (right div)를 축소했을 때 컨테이너 상자에서 떨어진다는 것입니다. 내 CSS에 box-sizing: border-box;이 필요하다고 누군가 발견했습니다. 나는 그것을 시험해보고 다음과 같이 두었다 :

<style> 
    #pro_img { 
    float:left; 
    border-right:1px solid #8dd5f6; 
    box-sizing: border-box; 
    width:140px; 
    height: 196px; 
    } 
</style> 

더 이상 떨어지지는 않지만 테두리는 내부에서 이미지를 경계로 보이지 않는다.

border-right을 #pro_img에서 사용하지 않도록 설정하면 문제가 해결되었지만 이미지와 텍스트를 구분하는 border-right을 원합니다.

합계 width 필요 : 140(img)+1(border)+189(text) = 330px은 컨테이너 상자에 맞습니다. 나는 상자의 너비를 332px으로 늘려 보았지만 도움이되지 않습니다.

감사합니다. 당신은 플로트를 사용하고 있기 때문에입니다

Answer 1

은 그가 당신의`에` '`제거하려고 처음 ... 내가 사용 마진 대신이 http://jsfiddle.net/3pmmjLx8/

업데이트] CSS 코드

#pro_text{ 
margin-left:141px; 
width:189px; 
height: 196px;  
background-color: #CCC; 
}