html - CSS 响应式卡片

Question

假设我有 100 张卡片:

<div class = "card">CARD</div> // this line is repeated 100 times

.card {
  background-color: blue;
  float: left;
  width: 150px;
  height: 75px;
  margin: 10px;
}

在这种情况下，布局是响应式的。您可以在此处查看示例:https://www.w3schools.com/css/tryit.asp?filename=trycss_float_elements

如您所见，当您调整页面大小时，越来越多的卡片移到下一行，直到出现新的一行卡片。

我想在每一行旁边添加一个索引，以动态方式显示每一行中的卡片数量。这可能与纯 html-css 吗？如果是，怎么办？

Answer 1

您需要使用相对于父元素的 % 单位:

所以连续有 4 个盒子:

.floating-box {
  float: left;
  width: 25%;
  height: 75px;
  box-sizing: border-box;
  border: 3px solid #73AD21;
}

如您所见，我需要添加 box-sizing属性并删除边距；

要达到相同的结果，您需要添加一个额外的标签:

.floating-box {
  float: left;
  width: 25%;
}
.floating-box-border {
  height: 75px;
  margin: 10px;
  border: 3px solid #73AD21;
  box-model
}

HTML:

<div class="floating-box">
    <div class="floating-box-border">
        Floating box
    </div>
</div>

我建议你看一下像 Bootstrap 这样的 css 框架 advanced Grid system .