當窗口很窄時，每行有一個div，當它更寬時，每行有更多的div

Question

我的頁面上有多個獨立的框都使用{float：left}。他們沒有什麼可以干涉的。

當窗口很窄時，我希望框爲{width：100％}。當窗口寬到足以讓兩個盒子並排放置時，我希望這些盒子的寬度爲{寬度：50％}。

我該如何去做這件事？

Answer 1

唯一的實質性回答到目前爲止已經使用媒體查詢，這是我無法弄清楚如何獲得工作。這裏的解決方案，我發現：

<div class="columns"> 
    <div class="box"> 
     <p>A bunch of stuff in the box.</p> 
    </div> 
</div> 

然後附加到一些CSS：

div.columns { 
    column-width: 300px; 
} 
div.box { 
    display: inline-block; 
    width: 100%; 
} 

這是不完美的，但它一直在100％的寬度，內容不管多少盒在任何給定的屏幕尺寸下並排放置，它可以讓我控制允許一個盒子得到多窄（使用div.columns的列寬）。

Answer 2

你的問題是相當模糊的，但它聽起來像你問Responsive Design

Answer 3

我認爲實現這一目標是使用媒體查詢的正確途徑。

爲了尋找靈感（或者乾脆使用），你可以檢查出http://cssgrid.net

的網格系統，調整到瀏覽器窗口的當前大小，和作品真的很好在我看來。如果你想要定製一些東西，他們的CSS就是一個很好的例子。

Answer 4

媒體查詢：

@media screen and (min-width:600px){ 
    div{width:50%; float:left;} 
} 

Demo