彈性佈局 - 確保佈局總是對齊

我正在設計與動態數量的項目一起使用的彈性佈局。正如您所看到的，佈局是流暢的，並且每行的項目數隨分辨率而變化。如果這有助於我使用PHP生成它，我可以在該項目上放置任何我想要的類。彈性佈局 - 確保佈局總是對齊

代碼

問題

我總是想最左邊的粉紅色網格與最左邊的頁面和同樣的ALIGN右邊。目前在粉色方塊上總是有額外的1％的餘量，這意味着它們不符合「測試」文本。

無效的解決方案

唯一的解決辦法我能想出是把1％的保證金上的所有內容是不是粉紅色網格，以便它們都對齊（即在測試文本），但在我的製作網站上，這會讓它變得非常混亂。使用JavaScript也將是無效的解決方案

可能的解決方法

可能實現這一目標是使用CSS的不同分辨率第n項規則，像下面的方式，但我似乎無法得到它正確地工作：

@media (max-width: 1200px) { 
    .thumb:nth-child(3n+3) { 
     width:21%; 
    } 
}

我只是知道這是一個非常聰明，優雅的解決方案，我無法弄清楚。要點是最乾淨，最兼容的解決方案。

2014-03-28 Jimmy

我明白你正在嘗試做什麼，但大多數（如果不是所有響應式框架都依賴某種填充內容區域來使所有內容都一致）。你可以通過一些Javascript來確定每個列在網格中的位置。 – Chris

回答正確的答案是？ –

你可以看看如何證明對齊方框的正確性，並使用display:inline-block;而不是float或display：flex。

IT將發送到最右邊和最左邊的第一個&每行的最後一個框。但箱子不會在最後一行上有相同的邊距，並會打破列的外觀。

display:inline-block和text-align:justify：http://jsfiddle.net/N3VRM/4/

display:flex和flex:wrap和justify-content:space-between：http://jsfiddle.net/N3VRM/5/

但看起來貼近您的需求是採用選擇nth-child(n）的計算和重置特定保證金到選定的框。

因此，讓我們的測試：.thumb:nth-child(4n) {margin-left:0;} .thumb:nth-child(4n+1) {margin-right:0;}

這些計數需要重置併爲每個mediaquerie設置。

請參閱上一個小提琴鏈接，使用mediaquerie進行陰影顏色切換。

2014-03-29 00:52:22

回答