自動調整瀏覽器中的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

我只想用任何流行的jQuery的div砌體插件：

https://masonry.desandro.com/

https://isotope.metafizzy.co/

http://salvattore.com/

Answer 2

由於您使用的網格系統非常簡單！

目前你已經給這些箱子一類col-md-3。所以你應該在桌面上得到4列。由於您只使用一行，所以添加類col-sm-4將確保您在平板電腦上獲得3列。如果你想總是顯示說4列而不管視口，然後嘗試col-xs-3

如果你想要像頂部圖像那樣的空間，那麼你可以創建一個偏移量。

行 --- COL-SM-10 COL-偏移-SM-1 ---排 ---與COL-XS-3

Answer 3

其他的解決辦法是使用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/