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/

Answer 2

正如您使用网格系统一样简单！

目前你已经给了一盒col-md-3。所以你应该在桌面上获得4列。由于您只使用一行添加类col-sm-4将确保您在平板电脑上获得3列。如果您想要始终显示说4列而不管视口，请尝试使用col-xs-3

如果您想要像顶部图像中那样的空间，那么您可以创建一个偏移量。

行 --- col-sm-10 col-offset-sm-1 ---排 --- div与col-xs-3

Answer 3

我会使用任何流行的jquery砌体插件：

https://masonry.desandro.com/

https://isotope.metafizzy.co/

http://salvattore.com/

在浏览器中自动调整DIV内容 - 如果需要，请重新调整

3 个答案: