色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

CSS規則如何控制每行的單元格數量？

CSS
錢琪琛1年前7瀏覽0評論

我找到HTML代碼片段和CSS規則。但是我找不到指定每行單元格數量的規則。

現在，我想使它具有響應性，使所有設備的單元大小都是固定的。然后每行顯示更多的單元以適合普通臺式計算機的寬屏幕，但是在移動電話的窄屏幕上每行顯示較少的單元。怎么做呢？

.row {
    margin: 0 -8px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.row-gallery .col-ds {
    flex-basis: 12.5%;
    align-self: center;
    -ms-flex-positive: inherit;
    flex-grow: inherit;
}

.row-gallery .col-ds .inner {
    background: #eff3f5;
    border: 1px solid #56a1d5;
    text-align: center;
    padding: 10px;
    height: 100%;
    overflow: hidden;
}

<div class="row row-gallery">
<div class="col-ds">
<div class="inner"><img src="https://www.datanumen.com/awards-pics/5_cows.gif" alt="Tucows 5 cows" width="122" height="96" /></div>
</div>
<div class="col-ds">
<div class="inner"><img src="https://www.datanumen.com/awards-pics/tscup5.gif" alt="TopShareware.com 5 Stars" width="130" height="80" /></div>
</div>
<div class="col-ds">
<div class="inner"><img src="https://www.datanumen.com/awards-pics/filetras.gif" alt="File Transit 5 Stars" width="120" height="75" /></div>
</div>
<div class="col-ds">
<div class="inner"><img src="https://www.datanumen.com/awards-pics/softland.gif" alt="SoftLandMark Editor's Pick" width="198" height="68" /></div>
</div>
<div class="col-ds">
<div class="inner"><img src="https://www.datanumen.com/awards-pics/filehung.gif" alt="FileHungry 5 Stars" width="101" height="108" /></div>
</div>
<div class="col-ds">
<div class="inner"><img src="https://www.datanumen.com/awards-pics/sn5star.gif" alt="SoftNews 5/5" width="93" height="90" /></div>
</div>
<div class="col-ds">
<div class="inner"><img src="https://www.datanumen.com/awards-pics/bpick1.gif" alt="FilePicks Best Pick" width="100" height="50" /></div>
</div>
<div class="col-ds">
<div class="inner"><img src="https://www.datanumen.com/awards-pics/soft32_5.jpg" alt="Soft32.com 5 Stars" width="116" height="66" /></div>
</div>
<div class="col-ds">
<div class="inner"><img src="https://www.datanumen.com/awards-pics/5softdll.gif" alt="SoftDLL 5 Stars" width="80" height="80" /></div>
</div>
<div class="col-ds">
<div class="inner"><img src="https://www.datanumen.com/awards-pics/award_softpedia_clean.gif" alt="Softpedia Award" width="121" height="84" /></div>
</div>
<div class="col-ds">
<div class="inner"><img src="https://www.datanumen.com/awards-pics/softpilemp.gif" alt="Softpile.com Most Popular Award" width="103" height="100" /></div>
</div>
<div class="col-ds">
<div class="inner"><img src="https://www.datanumen.com/awards-pics/softforall5.gif" alt="SoftForAll 5 Star Award" width="114" height="108" /></div>
</div>
</div>

如果您希望列保持相同的寬度，您可以使用CSS grid作為替代，并使用@media查詢來根據可用的屏幕寬度控制每行的列數:

.grid-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .5rem;
}

.grid-gallery__cell {
  padding: .5rem;
  background: #eff3f5;
  border: 1px solid #56a1d5;
  display: grid;
  place-items: center;
}

@media only screen and (min-width: 1024px) {

  .grid-gallery {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  
}

@media only screen and (min-width: 1366px) {

  .grid-gallery {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  
}

@media only screen and (min-width: 1920px) {

  .grid-gallery {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
  
}

body {
  /* demo only */
  margin: 2rem;
}

<section class="grid-gallery">
  <div class="grid-gallery__cell">
    <img src="https://www.datanumen.com/awards-pics/5_cows.gif" alt="Tucows 5 cows" width="122" height="96" />
  </div>
  <div class="grid-gallery__cell">
    <img src="https://www.datanumen.com/awards-pics/tscup5.gif" alt="TopShareware.com 5 Stars" width="130" height="80" />
  </div>
  <div class="grid-gallery__cell">
    <img src="https://www.datanumen.com/awards-pics/filetras.gif" alt="File Transit 5 Stars" width="120" height="75" />
  </div>
  <div class="grid-gallery__cell">
    <img src="https://www.datanumen.com/awards-pics/softland.gif" alt="SoftLandMark Editor's Pick" width="198" height="68" />
  </div>
  <div class="grid-gallery__cell">
    <img src="https://www.datanumen.com/awards-pics/filehung.gif" alt="FileHungry 5 Stars" width="101" height="108" />
  </div>
  <div class="grid-gallery__cell">
    <img src="https://www.datanumen.com/awards-pics/sn5star.gif" alt="SoftNews 5/5" width="93" height="90" />
  </div>
  <div class="grid-gallery__cell">
    <img src="https://www.datanumen.com/awards-pics/bpick1.gif" alt="FilePicks Best Pick" width="100" height="50" />
  </div>
  <div class="grid-gallery__cell">
    <img src="https://www.datanumen.com/awards-pics/soft32_5.jpg" alt="Soft32.com 5 Stars" width="116" height="66" />
  </div>
  <div class="grid-gallery__cell">
    <img src="https://www.datanumen.com/awards-pics/5softdll.gif" alt="SoftDLL 5 Stars" width="80" height="80" />
  </div>
  <div class="grid-gallery__cell">
    <img src="https://www.datanumen.com/awards-pics/award_softpedia_clean.gif" alt="Softpedia Award" width="121" height="84" />
  </div>
  <div class="grid-gallery__cell">
    <img src="https://www.datanumen.com/awards-pics/softpilemp.gif" alt="Softpile.com Most Popular Award" width="103" height="100" />
  </div>
  <div class="grid-gallery__cell">
    <img src="https://www.datanumen.com/awards-pics/softforall5.gif" alt="SoftForAll 5 Star Award" width="114" height="108" />
  </div>
</section>

我認為你是在追求一個類似于Pinterest的設計。

這里有一個視頻演示如何做到這一點:https://www.youtube.com/watch? v = VTJ _ 0 MPLS wk