Question

我想创建一个像这样的页面“ https://imgur.com/a/PS0U15Q”。目前，我得到了这个“ https://imgur.com/a/Qqq9Ebk”。但是用这种方法我无法获得想要的结果。

我想要：https://imgur.com/a/PS0U15Q 当前：https://imgur.com/a/Qqq9Ebk

我目前已经尝试过此代码。

#box-image-div{
  /* Prevent vertical gaps */
  line-height: 0;

  -webkit-column-count: 20;
  -webkit-column-gap:   0px;
  -moz-column-count:    20;
  -moz-column-gap:      0px;
  column-count:         20;
  column-gap:           0px;  
}

#box-image-div img {
  /* Just in case there are inline attributes */
  width: 100% !important;
  height: auto !important;
}

<div id="box-image-div">
    <img class="box-image" src="http://sty1.stallyons.com/advertising/wp-content/uploads/2018/09/112.png">
    <img class="box-image" src="http://sty1.stallyons.com/advertising/wp-content/uploads/2018/09/118.png">
    <img class="box-image" src="http://sty1.stallyons.com/advertising/wp-content/uploads/2018/09/113.png">
    <img class="box-image" src="http://sty1.stallyons.com/advertising/wp-content/uploads/2018/09/115.png">
</div>

Answer 1

您用作示例的图像来自百万美元脚本，如果不是开源的，则可以下载。如果您确实要这样做，请在这里查看他们的操作方法： https://gitlab.com/MillionDollarScript/MillionDollarScript

不同大小的图像在html css bootstrap中相互调整

1 个答案: