CSS, 2 개 div, 1 확장 1 개 고정되어 있지만 줄 바꿈이 필요합니다.

Question

2 개 div가 있으며 둘 다 최소 300px 크기가 필요합니다. 왼쪽 div를 사용 가능한 공간으로 늘려야합니다. 그러나 창 크기가 너무 작 으면 오른쪽 div를 아래로 떨어 뜨려야합니다. 이것은 내가 현재 가지고있는 것이지만 무엇을 바꾸어야할지 확신 할 수 없습니다.

<style> 
.bbleft { 
    min-height: 237px; 
    overflow:hidden; 
} 

.bbright { 
    float: right; 
    width: 300px; 
    min-height: 237px; 
    margin-left: 10px; 
} 
</style> 

Answer 1

간단한 사용이

.bbleft { 
    min-height: 237px; 
    overflow:hidden; 
float:left;width:100%; 
} 

Answer 2

이것은 당신이

http://jsfiddle.net/fxWg7/790/

HTML

<div class="container"> 
    <div class="left"> 
     content fixed width 
    </div> 
    <div class="right"> 
     content flexible width 
    </div> 
</div> 

CSS

을 필요로하는 무슨이다

.container { 
    height: auto; 
    overflow: hidden; 
} 

.left { 
    width: 300px; 
    float: left; 
    background: #aafed6; 
} 

.right { 
    float: none; /* not needed, just for clarification */ 
    background: #e8f6fe; 
    /* the next props are meant to keep this block independent from the other floated one */ 
    min-width:300px; 
    width: auto; 
    max-width:500px; /* not neccessary */ 
    overflow: hidden; 
} 

Answer 3

fiddle

CSS3의 접근..

유연한 왼쪽 DIV. 페이지가 너무 작 으면 오른쪽 div가 삭제됩니다. 왼쪽 div가 나머지 공간을 채 웁니다.

HTML

<div class="left"></div> 
<div class="right"></div> 

body{ 
    width:100%; 
} 
body div{ 
    min-width:300px; 
    float:left; 
} 

.left{ 
    width: calc(100% - 310px); 
}