彈性佈局與媒體查詢 - 邊距不正確

我試圖做一個彈性佈局，使頁面的左邊和右邊的左邊和右邊對齊，無論有多少項目顯示在那線。彈性佈局與媒體查詢 - 邊距不正確

.thumb { 
    float: left; 
    width:16%; 
    margin-left: 2%; 
    margin-right: 2%; 
    margin-bottom: 4%; 
    background: pink; 
    height: 200px; 
} 
.thumb:nth-child(5n) { 
    margin-right: 0px; 
    box-shadow:inset 0 0 0 3px red; 
} 
.thumb:nth-child(5n+1) { 
    margin-left: 0px; 
    box-shadow:inset 0 0 0 3px blue; 
} 
@media (max-width: 1200px) { 
    .thumb, .thumb:nth-child(1n) { 
     width:21%; 
     margin-left: 2%; 
     margin-right: 2%; 
     margin-bottom: 4%; 
     box-shadow: 0 0; 
    } 
    .thumb:nth-child(4n) { 
     margin-right:0; 
     box-shadow:inset 0 0 0 3px yellow; 
    } 
    .thumb:nth-child(4n+1) { 
     margin-left:0; 
     box-shadow:inset 0 0 0 3px blue; 
    } 
} 
@media (max-width: 600px) { 
    .thumb, .thumb:nth-child(1n) { 
     width:46%; 
    } 
    .thumb:nth-child(2n) { 
     margin-right:0; 
     box-shadow:inset 0 0 0 3px gray; 
    } 
    .thumb:nth-child(2n+1) { 
     margin-left:0; 
     box-shadow:inset 0 0 0 3px blue; 
    } 
} 
@media (max-width: 400px) { 
    .thumb, .thumb:nth-child(1n) { 
    width:100%; 
    display:block; 
    margin:0; 
    box-shadow: inset 0 0 5px 1px; 
    } 
} 
#left { 
    float: left 
} 
#right { 
    float: right 
}

我相信我正確使用n個子所以他們對準從左側取出保證金和最右邊的粉紅色的盒子，但是當我運行它看起來不正確它。任何人都可以告訴我哪裏錯了嗎？

來源

2014-03-29 Jimmy

你是什麼意思'不正確'（看你使用的例子在另一篇文章/問題中提供） –

你想要這個http://jsfiddle.net/U2W72/3/？ –

@MiljanPuzović你已經釘上了！唯一的問題是這是不正確的，當有五個跨越（即與紅色框一） – Jimmy

當您從行的第一個元素和最後一個元素刪除邊距時，寬度+邊距的總和不是100％。例如：如果您有5個寬度爲16％，左右邊距爲2％的框，則總數爲100％。但是，如果您從第一個方框中刪除2％的保證金，並從最後一個方框中刪除2％的保證金，那麼總計爲96％。合理？

來源

2014-03-29 15:29:25 Vel

彈性佈局與媒體查詢 - 邊距不正確

回答

相關問題