CSS를 사용하여 div의 너비를 자동으로 조정하는 방법은 무엇입니까?</p> <p>HTML :

Question

는 following example을 고려

<div class="wrapper"> 
    <div class="left">Some text here</div><div class="right">Hello Stack Overflow</div> 
</div> 

CSS :

.wrapper { 
    border: 1px solid black; 
    width: 400px; 
} 
.left { 
    border: 1px solid green; 
    display: inline-block; 
} 
.right { 
    border: 1px solid red; 
    display: inline-block; 
    float: right; 
} 

나는 폭에 따라, 가능한 한 큰 것으로 녹색 div의 폭을 강제로 싶습니다 빨간색 중 하나. 빨간색 div의 너비는 div의 내용에 따라 달라질 수 있습니다. 예를 들어 빨간색 div의 너비가 150px 인 경우 초록색 너비는 250px 여야합니다. 항상 true이어야합니다.

green div width + red div width = 400px 

어떻게하면 CSS를 사용하여이 작업을 수행 할 수 있습니까?

없음 자바 스크립트주세요 ...

Answer 1

sandeep가 앞서 말했듯이, force the green div to take up as much space as possible.

.wrapper { 
    border: 1px solid black; 
    width: 400px; 
    display:table; 
} 
.left { 
    border: 1px solid green; 
    display: table-cell; 
    width: 100%; 
} 
.right { 
    border: 1px solid red; 
    display: table-cell; 
} 

IE7 이하에서는 divs-as-tables가 지원되지 않습니다.

Answer 2

메이크업은 http://jsfiddle.net/sandeep/eGphW/

.wrapper { 
    border: 1px solid black; 
    width: 400px; 
    display:table; 
} 
.left { 
    border: 1px solid green; 
    display: table-cell; 
} 
.right { 
    border: 1px solid red; 
    display: table-cell; 
} 

당신이 테이블로 사업부를 사용할 수 있습니다 원하는 그건합니다.