javascript - 自动调整浏览器中的 DIV 内容 - 必要时重新缩放

Question

我需要在浏览器中显示很多元素，DIV class='box'。为此，我想根据 Windows 浏览器的宽度自动调整元素的数量。如果有必要，这些元素也会重新缩放。

元素的宽度是一样的。我正在使用 Bootstrap 框架来完成它。

我想要这样的结果:

根据浏览器的大小，自动调整元素和缩放。

body{
  background-color: #f8f8f8;
}

/*          BOX PRINCIPAL        */

.box{
  margin: 50px;
  width: 300px;
  height: 300px;
  border: 4px solid #004259;
  border-radius: 15px;
  overflow: hidden;
}

/*          IMAGE                */

.img-prod{
  width: 100%;
  height: 100%;
  border-radius: 12px;
  align: center;

  max-width: 100%;
  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

/*          ON HOVER             */

.box:hover{
  border: 4px solid #FDE1AE;
}

/*
.box:hover .text-link{
  color: #FDE1AE !important;
}
.box:hover .text-edicio{
  color: #FDE1AE !important;
}
*/

.box:hover .img-prod {
  -moz-transform: scale(1.05);
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
}

/*            BOX-TEXT             */

.box-text{
  position: relative;
  width: 100%;
  height: 30%;
  background: -webkit-linear-gradient( rgba(255,0,0,0), #004259);
  background: -o-linear-gradient( rgba(255,0,0,0), #004259);
  background: -moz-linear-gradient( rgba(255,0,0,0), #004259);
  background: linear-gradient( rgba(255,0,0,0), #004259);
  bottom: 45%;
  padding-top: 5%;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
.box-text span{
   color: #f8f8f8;
}
.text{
  position: absolute;
  width: 96%;
  left: 3%;
  bottom: 10%;
}
.text-codi{
  font-size: small;
}
.text-descripcio{
  font-size: medium;
}
.text-edicio{
  color: #99B3BD !important;
  font-size: x-small;
}
.text-link{
  color: #f8f8f8 !important;
}
.text-link:hover,
.text-link:focus{
  text-decoration: none;
}

/*          CHECK CARD           */

.checkbox {
  bottom: 97%;
  left: 3%;
}

/*          BUTTON CARD           */

.btn-estat{
  border: 0;
  border-radius: 10px;
  position: relative;
  bottom: 300px;
  left: 87%;
  width: 10%;
  background-color: #73CBB0;
  color: white;
}

<div class="container">

  <div class='row'>  <!-- width would be 100% of img-grid width -->

    <?php
      $i = 0;
      while ($i < 20){ ?>

        <div class='col-md-3'>
          <div class="box">
            <a class="text-link" href='#'>
                <img class="img-prod" src="http://placeimg.com/440/680/any" />
            </a>

            <input type="checkbox" class="checkbox" id="check1" />

            <button type="submit" class="btn-estat">
                <i class='material-icons' style='font-size: 20px;'>done</i>
            </button>

            <div class="box-text">
                <span class='text'>
                  <span class="text-codi">
                      <a class="text-link" href='#'>11111</a>
                  </span><br/>
                  <span class="text-descripcio">
                      <a class="text-link" href='#'>TEXT EXAMPLE</a>
                  </span><br />
                </span>
            </div>
          </div>

        </div>
      <?php
          $i++;
      } ?>

  </div>
</div>

我知道按行应用固定数量的元素，但我不知道如何根据大小显示元素。

Answer 1

其他解决方案是使用 flexbox:

.grid {
  display: flex;
  flex-wrap: wrap;
}

.thumbnail {
  flex: 0 0 100px; /* or any other fixed width */
}

这是对 flexbox 的非常好的介绍:https://css-tricks.com/snippets/css/a-guide-to-flexbox/

编辑: 这是 jsfiddle:https://jsfiddle.net/ex017ok1/