Question

基本上，我在网格中显示不同数量的列（单元，它基于Foundation）。台式机为3列，平板电脑为2列，移动设备为1列。我需要在每列的底部添加边框，但不在底部一行的下方添加边框。请以图片为例。

我尝试过css nth child，但是不能用它来计数列（至少我认为）。因此，希望通过php或js以编程方式实现这一目标。但是...我不知道在哪里或如何解决这个问题！！！任何帮助深表感谢！

这是我到目前为止获得的代码：

<section class="inbegrepen">
<div class="grid-container">
    <div class="grid-x grid-padding-x small-up-1 medium-up-2 large-up-3">

        <?php

        if( have_rows('inbegrepen') ):

            $i = 1;

            while( have_rows('inbegrepen') ): the_row();

                $title = get_sub_field('inbegrepen_titel');
                $content = get_sub_field('inbegrepen_tekst');

                ?>

                <div class="cell">
                    <h6><span><?php echo $i; ?></span> <?php echo $title; ?></h6>
                    <?php echo $content; ?>
                </div>

                <?php $i++; endwhile; ?>

        <?php endif; ?>

    </div>
</div>

Answer 1

您可以通过在容器上重复渐变来实现此目的。

这是一个简化的示例

.container {
  background:
    repeating-linear-gradient(to bottom, 
        transparent 0, transparent calc(110px - 2px),
        red calc(110px - 2px),red calc(110px + 1px)) 
        top/100% calc(100% - 5px);
        
  /*to illustrate*/
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(100px,1fr));
  grid-column-gap:5px;
  animation:change 5s linear infinite alternate;
}
.container > div {
  display:inline-block;
  vertical-align:top;
  height:100px;
  margin:5px 0;
  background:grey;
}

@keyframes change {
  from {width:600px}
  to {width:200px}
}

<div class="container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>

Answer 2

对于第n个孩子发现的问题，非常简单有效的解决方案。按预期工作：css solution nth child

将底部边框按行添加到列中，但不添加最后+响应的

2 个答案: