Question

我正在制作一个如下所示的网格视图： http://i.stack.imgur.com/41xxM.png

所以在这张图片中你看，它每行总是两个容器，但内部元素的浮动方向（图像/内容）每行都会改变，所以我需要选择一行中的项目（变量： X），跳过X项并选择下一个X项等等......

我知道应该有可能以某种方式与nth：孩子，但我无法让它工作......一个有用的资源是我找到的这个链接，但即便如此，我也无法完成它。 .. http://keithclark.co.uk/articles/targeting-first-and-last-rows-in-css-grid-layouts/

我真的很感谢你的帮助！如果你碰巧有一个sass-mixin，那就太棒了！

谢谢！

编辑：

这是一个容器的HTML：

<article id="post-<?php the_ID(); ?>" <?php post_class('post-object'); ?>>
  <div class="post-object-inner">
    <div class="object-content">
        <a href="<?php echo the_permalink(); ?>">
            <div class="half">
                <div class="object-content image-part" style="background-image: url(<?php echo $postimage; ?>)"><?php echo $author; ?></div>
            </div>

            <div class="half">
                <div class="object-content content-part">
                    <span>
                        <h2><?php echo $author; ?></h2>
                        <h1><?php echo $trimmed_title; ?></h1>
                    </span>
                </div>
            </div>
        </a>
    </div>
</div>

编辑2：

以下是DOM生成的代码：

<article id="post-28" class="post-object post-28 post type-post status-publish format-standard has-post-thumbnail hentry category-allgemein">
  <div class="post-object-inner">
    <div class="object-content">
        <a href="http://domain.com/die-neue-website-geht-online/">
            <div class="half">
                <div class="object-content image-part" style="background-image: url(http://domain.com/uploads/2015/07/mittag.jpg)">Lukas Guschlbauer</div>
            </div>

            <div class="half">
                <div class="object-content content-part">
                    <span>
                        <h2>Lukas Guschlbauer</h2>
                        <h1>Die neue Website geht online!</h1>
                    </span>
                </div>
            </div>
        </a>
    </div>
</div>

Answer 1

好的，我能够写一个Sass-Mixin为我处理这种行为！

@mixin nth-rows($rowitems: 3, $totalitems: 10) {
$num: 0;
$totalitems: $totalitems + 1;

@while $num <= $totalitems {
    &:nth-of-type(n+#{$num + 1}):nth-of-type(-n+#{$num+$rowitems}) {
        @content;
    }

    $num: $num + ($rowitems*2);
}

}

我是如何使用它的：

.post-object {
position: relative;
width: 100%;
float: left;

@include xs() {
    @include nth-rows(1,10) {
        .half {
            float: left;
        }
    }
}

@include sm($md) {
    width: 50%;
    @include nth-rows(2,10) {
        .half {
            float: left;
        }
    }
}

@include md() {
    width: 33.3%;

    @include nth-rows(3,10) {
        .half {
            float: left;
        }
    }
}

（xs（），sm（）和md（）是我定义的断点mixins）

它的作用：

它选择前X个项目（rowitems），跳过一行并循环直到给定数量的元素（totalitems）。

变量totalitems是现在唯一不完美的东西，因为我不知道有多少元素，所以我必须给它一个固定值...但是如果我知道那里＆＃39; s将是10个元素，这太棒了！

<强> Ressources：

我找到了这个网站（http://nthmaster.com），其中有一个所谓的＆＃34; 通用子范围＆＃34;的例子，看起来像这样：

li:nth-child(n+4):nth-child(-n+8) span {
  background-color: #298EB2;
  box-shadow: inset -3px -3px 10px rgba(0, 0, 0, 0.4), 0 0 10px black;
}

＆＃34;使用这个n-child（n + 4）：nth-child（-n + 8）我们可以选择元素在某些范围内，在这种情况下，元素4-8。＆＃34; （这是来自网站的例子）

为什么我使用nth-of-type（）而不是nth-child（）？

Safari并未解释＆＃34;通用子系列＆＃34; 。所以在这个Stackoverflow-Thread（https://stackoverflow.com/a/17312173/3754201）中，我发现＆＃34;：nth-of-type（）＆＃34;有更好的支持。（Firefox 3.5 +，Opera 9.5 +，Chrome 2 +，Safari 3.1 +，IE 9 +。）

选择X元素，跳过X，选择X元素

1 个答案: