流動元素

Question

引導舒展在使用Twitter的引導，我有這樣的GUI：

| [label] [input] [input] [button] [progressbar.............................] | 

我想如果視口變得太小的進度換到一個新行，而一旦其對新行我想它延伸到視口的整個寬度，像這樣：

| [label] [input] [input] [button]   | 
| [progressbar..............................] | 

我應該採取什麼樣的CSS魔法爲這個？

Answer 1

你可以嘗試使用Media Queries：

一個例子：

@media (min-width:400px) and (max-width:600px){ /*any screen which have size between 400px and 600px for e.g. */ 

    .progressbar { 
     clear:both; /*clear floats*/ 
     display:block; /* block contains 100% of parent */ 
    } 

} 

因此，你可以根據屏幕尺寸控制與CSS佈局，媒體類型（屏幕，打印等），類型屏幕（視網膜顯示等）。