CSS规则如何控制每行的单元格数量？

v8wbuo2f 于 2023-05-19 发布在其他

关注(0)|答案(2)|浏览(117)

我找到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>

更新

我更改弹性基准：12.5%; -> 164px;这解决了问题。谢谢你的帮助。

css

来源：https://stackoverflow.com/questions/76243253/how-the-css-rules-control-the-number-of-cells-per-row

2条答案

按热度按时间

vfh0ocws1#

我认为你在追求一个类似于Pinterest的设计。
下面是一段视频，告诉你是怎么做到：https://www.youtube.com/watch?v=VTJ_0MplSwk

赞(0）回复(0）举报 2023-05-19

1l5u6lss2#

如果你希望列保持相同的宽度，你可以使用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>

赞(0）回复(0）举报 2023-05-19

我来回答

CSS规则如何控制每行的单元格数量？

2条答案

相关问题

热门标签

最新问答