并排放置缩略图

Question

我正在尝试通过使用

来实现 https://www.sitepoint.com/using-modern-css-to-build-a-responsive-image-grid/ scenario here http://www.romero-fliesen.de/test-portfolio/#cbp=http://www.romero-fliesen.de/cubeportfolio/cube-post-1/

.cbp-slider-wrap { 
  display: flex;
  padding: 0 4px;
  float: left;
}
.cbp-slider-item, .cbp-slider-wrap {
  display: flex;
  padding: 0 4px;
  float: left;
}

但我最终将缩略图缩小了。任何有用的提示将不胜感激。

Answer 1

如果我理解正确，您需要设置 flex-wrap property。

.cbp-slider-wrap {
   display: flex;  //Set images side by side.
   flex-wrap: wrap; //Allows images to wrap into multiple lines avoiding them to shrinking. Number of image per line and their size can be controlled with 'max-width' (below)
}  

.cbp-slider-item {
   margin: 8px;
   max-width: 30%; //In this specific case, 22% will fit 4 images per line whereas 47% 2 images per line. 
}

看起来如何：

max-width: 30%

max-width: 22%

max-width: 47%

并排放置缩略图

Place thumbnail images side by side

html

css

wordpress

image-gallery