最大寬度和最小寬度均勻分佈的DIV

我想創建一個佈局，其中每個DIV的最大寬度爲300px。最大寬度和最小寬度均勻分佈的DIV

如果屏幕是600px，那麼兩個100％的div應該彼此相鄰放置。如果屏幕是700px，那麼三個233px（每個DIV 100％）應該彼此相鄰放置。

這意味着DIV應該總是佔據屏幕寬度的100％。

我也想有一個最小寬度（如150px），以便每個DIV不能小於一定的數量。

這意味着，在一個小屏幕上，我可能會得到帶DIV的兩列，並且在大的範圍內，我可能會得到帶有DIV的四列或更多列。

來源

2013-06-02 Patrik

您是否希望它們始終爲300px，或者您希望它們隨着屏幕變小到最大150px而縮小，然後創建另一行？ – mclaassen

是的，我希望他們能夠縮小屏幕變小。 – Patrik

在這個例子中，當屏幕大於900px時，會有4列，當屏幕點擊900px時，會下降到3列，當屏幕點擊600px時，會下降到2列，當它達到300px時，會有一列。這將讓div的佔用屏幕，最大寬度爲100％，將永遠是300像素（除了屏幕大於1200像素寬，你仍然會得到4列）

div { 
    width: 25%; /* anything above 900px and there will be 4 columns */ 
    min-width: 150px; 
    float: left; 
    height: 200px; 
    } 

    @media screen and (max-width: 900px) { 
    div { width: 33%; } 
    } 

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

    @media screen and (max-width: 300px) { 
    div { width: 100%; } 
    }

這可以被修改爲具有任意數量的列和任何數量的不同的閾值屏幕大小，其中列數將改變。

如果您有邊框或邊距，您還必須使寬度％s略小。

來源

2013-06-02 20:37:22 mclaassen

它接近我想要的，但仍然有一些屏幕尺寸會留下一些空白的右側。請看這裏：http：//jsfiddle.net/ezdMn/3/ – Patrik

它的邊界，它打破它。改爲使用不同的背景顏色，或者讓％s略小一些。 – mclaassen

完美的作品。謝謝！ – Patrik

div 
{ 
width:33.3333%; 
    min-width:150px; 
    max-width:300px; 
    display:inline-block; 
    background:#EFEFEF; 
    border:1px solid #CCC; 
    height:100px; 
}

我沒有測試過（今天），但我認爲這會工作，直到達到最小尺寸。

來源

2013-06-02 20:35:58

這不起作用（div不佔用屏幕的100％） – mclaassen

最大寬度和最小寬度均勻分佈的DIV

回答

相關問題