齊平的CSS盒子對齊

我正在用砌體來練習CSS。我正在做一些基本的測試，看看每件事情如何顯示。但我不知道如何解決這個問題。我想在我的CSS中將所有的圖片都放入.masonry類中，但這裏有一點點的空間，我不知道如何解決它。我希望所有的盒子都是齊平的，每個盒子之間不能顯示空白。齊平的CSS盒子對齊

這裏是codepen：

http://codepen.io/anon/pen/Cpedg

enter image description here

我的CSS：

* { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
      box-sizing: border-box; 
} 

body { font-family: sans-serif; } 

.masonry{ 
    margin: 0 auto; 
    background: #EEE; 
    max-width: 80%; 
} 

.masonry .item, 
.masonry .grid-sizer { 
    width: 20%;  /*item default width of 20%*/ 
    margin: 0px; 
} 

.masonry .item, 
.masonry .grid-sizer { 
    height: 60px; /* default hieght of image*/ 
    float: left; 

    background: #D26; 
    border: 1px solid #343; 
    border-color: hsla(0, 0%, 0%, 0.5); 
    border-radius: 5px; 
} 

.item.w2 { width: 40%; }   /* changes each item to these chracteristics*/ 

.item.h2 { height: 100px; } 
.item.h3 { height: 130px; } 
.item.h4 { height: 180px; }

我的HTML：

<h1>Masonry - columnWidth</h1> 
<div class="masonry js-masonry" data-masonry-options='{ "columnWidth": ".grid-sizer", "itemSelector": ".item" }'> 
    <div class="grid-sizer"></div> 
    <div class="item"></div> 
    <div class="item w2 h2"></div> 
    <div class="item h3"></div> 
    <div class="item h2"></div> 
    <div class="item w3"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item h2"></div> 
    <div class="item w2 h3"></div> 
    <div class="item"></div> 
    <div class="item h2"></div> 
    <div class="item"></div> 
    <div class="item w2 h2"></div> 
    <div class="item w2"></div> 
    <div class="item"></div> 
    <div class="item h2"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item h3"></div> 
    <div class="item h2"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item h2"></div> 
</div>

來源

2013-10-25 Liondancer

肯定會需要一個codepen/jsfiddle這隻小狗。 –

對不起，我應該想通了。我馬上就去做 – Liondancer

您可以通過添加（或相當移除）margin和padding（從）你的身體，像這樣除去這些空間細胞之間：

body { 
    font-family: sans-serif; 
    margin: 0; 
    padding: 0; 
}

這對左上角的箭頭可能的解決辦法，但我我不太清楚第二個箭頭的問題是什麼？

來源

2013-10-25 22:59:41

如果你把背景顏色從'＃EEE'改變成不同的顏色，更容易看到 – Liondancer

改變，否則可能很難看到第二個箭頭指向'.masonry'類中的塊#EEE到＃b6ff00，你會看到我指的是什麼。我嘗試了您的更改，但它並沒有真正解決任何問題，但感謝您的努力！非常感激！ – Liondancer

現在我明白了。就像您提到的那樣，似乎存在瀏覽器問題。但對我而言，它工作得很好。瀏覽器縮放/窗口大小更改後，單元格的寬度重新排列。 –

-1

因此，事實證明，谷歌瀏覽器的縮放有時候會有點時髦。快速修復重新排列一切是按ctrl + 0重新調整一切！

來源

2013-10-25 23:58:57 Liondancer

齊平的CSS盒子對齊

回答

相關問題