三列響應式砌體網格

Question

我想在桌面上顯示3列磚石圖像網格，並在設備上顯示單列。 在移動設備上執行以下合並操作，但在台式機上則失敗（兩個圖像之間有很多間隙）。 我嘗試以百分比設置寬度，但沒有運氣

https://plnkr.co/edit/g75ClJU4VJWgJbfiKYdu?p=preview

.block{
    float: left;
    margin: 2px 2px 2px 2px;
    width: calc(33.33% - 17px);
}

.block img {
    width: 100%;
    height: auto;
}

@media only screen and (max-width: 500px) {
  .block {
      float: left;
      margin-bottom: 25px;
      width: calc(100% - 17px);
  }
}

提前致謝

MSK

Answer 1

您可能只想使用媒體查詢並刪除float 。

下面的設計非常靈活，可以

• 手機屏幕上的一欄
• 平板電腦上的兩列
• 小型台式機屏幕/筆記本電腦上的三列
• 大型台式機上的四列
• 在4k屏幕上的五列。

其余評論位於摘要中。

 body { background: #131418; } /* Step 1: start with resetting some defaults */ * { margin: 0 auto; padding: 0; max-width: 100%; } /* Step 2: center things inside the grid and clear some space around it by setting a device based max-width and margin*/ .grid { text-align: center; max-width: 95vw; margin: 2.5vw auto; } /* Step 3: how big should the gap be between grid items? remember that the total gap between two items would be double what you set here since both would have that amount set as their individual padding. Also add box-sizing:border-box to make sure the padding doesn't affect the total widh of the item */ .grid-item { padding: 5px; box-sizing: border-box; } /* Step 4: Add media queries (subjective) to make the whole grid resposive. */ @media (min-width: 500px) { .grid-item { width: 50%; } } @media (min-width: 1000px) { .grid-item { width: 33.333%; } } @media (min-width: 1700px) { .grid-item { width: 25%; } } @media (min-width: 2100px) { .grid-item { width: 20%; } } 

 <!-- Made possible by the great work of David DeSandro @ https://masonry.desandro.com --> <!-- Part 1: Add the scripts --> <!-- Step 1: Let's start by loading jQuery. jQuery is not required for masonary to function but makes things easier --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- Step 2: Then load imagesloaded. imagesloaded makes sure the images are not displayed until they are fully loaded --> <script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script> <!-- Step 3: we load masonry --> <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script> <!-- Part 2: Create the grid --> <!-- Step 1: Start with a the main grid wrapper--> <div class="grid"> <!-- Step 2: Add grid items---> <div class="grid-item"> <img src="https://s-media-cache-ak0.pinimg.com/736x/00/37/03/0037037f1590875493f413c1fdbd52b1--cool-beards-inspiring-photography.jpg" /> </div> <div class="grid-item"> <img src="https://s-media-cache-ak0.pinimg.com/736x/cd/90/d9/cd90d9de63fa2c8e5c5e7117e27b5c18--gritty-portrait-photography-studio-photography.jpg"> </div> <!-- Step 3: repeat...---> <div class="grid-item"> <img src="https://1.bp.blogspot.com/-9QM7ciGXRkQ/V1hsB-wNLBI/AAAAAAAAMoA/eYbSHs00PTAjrI4QAmvYAIGCUe1AuRAnwCLcB/s1600/bryan_cranston_0095.jpg"> </div> <div class="grid-item"> <img src="http://webneel.com/sites/default/files/images/project/best-portrait-photography-regina-pagles%20(10).jpg" /> </div> <div class="grid-item"> <img src="https://s-media-cache-ak0.pinimg.com/736x/dd/45/96/dd4596b601062eb491ea9bb8e3a78062--two-faces-baby-faces.jpg" /> </div> <div class="grid-item"> <img src="http://www.marklobo.com.au/news/wp-content/uploads/2013/03/Melbourne_Portrait_Photographer_Mark_Lobo-Cowboy.jpg" /> </div> <div class="grid-item"> <img src="https://format-com-cld-res.cloudinary.com/image/private/s--PcYqe7Zw--/c_limit,g_center,h_65535,w_960/a_auto,fl_keep_iptc.progressive,q_95/145054-8576001-Rob-Green-by-Zuzana-Breznanikova_7725_b_w.jpg" /> </div> <div class="grid-item"> <img src="http://www.iefimerida.gr/sites/default/files/janbanning11.jpg" /> </div> <div class="grid-item"> <img src="https://s-media-cache-ak0.pinimg.com/736x/66/bb/e7/66bbe7acc0d64da627afef440a29714b--portrait-photos-female-portrait.jpg" /> </div> <div class="grid-item"> <img src="https://s-media-cache-ak0.pinimg.com/736x/25/34/b6/2534b6c18c659546463f13b2dc62d4ce--natural-portraits-female-portraits.jpg" /> </div> <div class="grid-item"> <img src="https://s-media-cache-ak0.pinimg.com/originals/8d/67/12/8d671230ced871df8428b571ed6ec192.jpg" /> </div> </div> <!-- Part 3: the script call --> <!-- Now that everything is loaded we create a script to trigger masonary on $grid. Note that this simply says: "if the images are fully loaded, trigger masnory on $grid. --> <script> var $grid = $(".grid").imagesLoaded(function() { $grid.masonry({ itemSelector: ".grid-item" }); }); </script>