創建一個響應式網格，堆棧，響應式圖像

我之前就創建了一個關於製作響應式網格的問題，並且得到了它的工作，這要感謝大家的幫助，但現在我正在爲下一個階段而努力。創建一個響應式網格，堆棧，響應式圖像

我想要一個帶有三列（三個圖像）的網格，每個網格的寬度都是33.3％。然後，我在max-width:100%中有一張圖片，以便將它們縮放到其容器的寬度。

現在我被困在使他們在平均移動分辨率堆棧。所以基本上，當它們變得太小而不能被輕鬆地看作是連續三次時，我希望它們在一行中下降到2（使得3行總計6張圖像），然後在長堆棧中每行減少一行。

JS小提琴here

2012-10-15 Francesca

是一樣的東西this你在找什麼？這裏的訣竅是在產品div上放置一個絕對最小寬度，這與float屬性結合在一起會爲您提供所需的結果。

#content{ 
    width:90%; 
    margin-top: 60px; 
    margin-left:5%; 
    margin-right:5%; 
} 

.product{ 
    width:33.3%; 
    min-width:100px; 
    display:block; 
    float: left; 
} 

.product img{ 
max-width:100%; 
} 

body{ 
    background-color:#666; 
}

來源

2012-10-15 20:12:28

您能否給我留言解釋downvote，以便我可以改進答案？謝謝！ –

也許你需要，然後再繼續學習how to use media queries和responsive design。

在特定情況下，你可以這樣做this demo（縮小窗口中看到它在行動）：

.product{ 
    width:50%; /* initially, each row contains 2 products */ 
    float: left; 
    /* no need for display:block; */ 
} 

@media screen and (min-width:450px) { /* <--- this is a media query */ 

    /* 
     everything inside this media query will be processed 
     only if the viewport is larger then 450px 
    */ 

    .product{ 
     width:33.3%; /* larger screens will diplay 3 products per row */ 
     /* float is already declared */ 
    } 

}

顯然，這僅僅是一個例子。你知道每個.product元素裏面會有什麼。只需掌握媒體查詢，你就可以做任何變化。

舉例來說，如果你想每行只有一個產品上的小屏幕，你可以這樣做：

.product{ 
    /* nothing here! 1 product per row */ 
} 

@media only screen and (min-width:450px) and (max-width:1023px) { 
    .product{ 
     width:50%; /* 2 products per row */ 
     float:left; 
    } 
} 

@media screen and (min-width:1024px) { 
    .product{ 
     width:33.3%; /* 3 products per row */ 
     float:left; 
    } 
}

...等等。這可以用許多不同的方式完成，它只取決於你的項目。

來源

2012-10-15 20:25:47 Giona

你仍然需要最小寬度，否則它們不會進一步下降到1列。雖然媒體查詢+1，不記得。 –

Thanks @Asad，btw'產品'是一個div，默認顯示是'block'，因此從0到450px將佔用整個「行」 – Giona

沒有probs。從0到450，它們仍然具有50％的寬度，因爲你明確地設置它們並且它們是浮動的。您可以繼續爲每個範圍定義這一點，但我認爲最好的方法是簡單地定義您認爲圖像的最小外觀寬度（以及可選的最大外觀寬度） –

創建一個響應式網格，堆棧，響應式圖像

回答

相關問題