CSS，2 divs，1 expansion 1 fixed，but need to wrap

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下降。 Left div填滿剩下的空間。

HTML

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

CSS

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

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