浮動左邊，但在屏幕上的某個點停止調整大小？

Question

我有一個div伸展我的網頁的高度，用浮離開，如：

#leftvignette { 
    width: 200px; 
    height: 100%; 
    float: left; 
} 
#sitecontent { 
    margin: auto; 
    width: 1000px; 
} 

HTML：

<div id="leftvignette"></div>  
<div id="sitecontent"> 
    all other content here 
</div> 

我想這個div總是坐在我的內容的左邊，直到窗口小於1000px寬 - 我不希望#leftvignette闖入並覆蓋我的內容。

有沒有人知道一種方法來做到這一點？

Answer 1

#leftvignette { 
    width: 200px; 
    height: 100px; 
    float: left; 
    background:#000; 
} 
#sitecontent { 
    margin: auto; 
    width: 1000px; 
    background:#f00; 
    height:200px; 
    float:left; 
} 
.clear{clear:both;} 


<div id="leftvignette"></div>  
<div id="sitecontent"> 
    all other content here 
</div> 
<div class="clear"> 
<!--this will help in clearing float for next comming elements.--> 
</div> 

Answer 2

使用CSS媒體查詢和CSS clear屬性去除浮動：

@media all and (max-width: 1000px) { 
    #leftvignette { 
    clear:both; 
} 
} 

任何低於1000像素屆時將有浮動：左刪除。

Answer 3

我建議你創建一些util類，例如.clear，並在需要時只需將html應用於類就可以使用它們。

CSS：

.clear{ 
    clear:both; 
} 

HTML

<div id="leftvignette" class="clear"></div> 

記住浮動後使用它;它會清除你的div的兩側，所以沒有元素會被放置在你的「Box」的左側和右側。

在你的情況是更好，如果你使用媒體查詢，像：

@media screen and (max-width:1000px){ 
    #leftvignette{ 
     clear:both; 
    } 
}