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

是的，您可以使用CSS计数器执行此操作：

.wrapper {
  counter-reset: line-number 0;
}

.floating-box {
  float: left;
  width: 150px;
  height: 75px;
  margin: 10px;
  border: 3px solid #73AD21;
  counter-increment: line-number 1
}

.floating-box:before {
  content: counter(line-number) ": ";
}

<h2>Floating boxes</h2>

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

Answer 2

您需要相对于父元素使用％单位：

所以要连续有四个盒子：

.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>

我建议您看一下诸如advanced Grid system之类的Bootstrap之类的CSS框架。

Answer 3

这是我仅使用html和CSS解决的方法。请调整页面大小以查看效果。

.underlay {
  z-index: 0;
  margin-right: 40px;
}

.overlay {
  position: absolute;
  z-index: 1;
  background-color: darkgray;
  top: 0px;
  margin-left: 40px;
}


.underlayBox {
  float: left;
  margin: 2px;
  background-color: white;
  height: 30px;
  width: 60px;
}


.overlayBox {
  float: left;
  margin: 2px;
  background-color: floralwhite;
  height: 30px;
  width: 60px;
}

<div class="underlay"><div class="underlayBox">1</div><div class="underlayBox">2</div><div class="underlayBox">3</div><div class="underlayBox">4</div><div class="underlayBox">5</div><div class="underlayBox">6</div></div>')<div class="overlay"><div class="overlayBox">A1</div><div class="overlayBox">A2</div><div class="overlayBox">A3</div><div class="overlayBox">A4</div><div class="overlayBox">A5</div><div class="overlayBox">A6</div></div>

CSS响应卡

3 个答案: