CSS影响彼此＆＃34; Row＆＃34;与Float Left＆＃34; Cells＆＃34;

Question

我正在尝试使用CSS3重新设计我的博客布局。以前我用了一张桌子，但我从来没有像我想的那样得到它。

该博客名为Wall of Text，标题看起来像一堆砖（重复背景图片）。在它下面是链接到存档的帖子，这些帖子也看起来像标题墙的砖块。第一行看起来很棒，但是当链接换行时，下一行应该有一个20px的左偏移/边距/填充，以保持砖状图案。

箭头显示我希望缩进的位置。

我希望我能让容器display: table-row使用:nth-child(even)选择器。但是，将其设置为表格行会使定位变得困难，最后我将其设为display: table。然后，正如它当前设置的那样，:nth-child(even)选择所有其他砖而不是每隔一行。

这是我的代码的链接，其中填充了静态虚拟“链接”：jsfiddle。

关于如何实现这一目标的任何想法？

Answer 1

第一步是确定新行开始的位置。如果所有砖块的宽度相同，如果您还知道所有砖块和容器的总宽度，则可以计算每条砖块的数量。

Javascript代码

// width of bricks container
var cont_width = document.getElementsByClassName('bricks')[0].offsetWidth;

// width of all bricks
var bricks_width = 0;
var bricks = document.getElementsByClassName('brick');

for (var i = 0; i < bricks.length; i++) {
    bricks_width += bricks[i].offsetWidth;
}

第二步是为每个第二行的第一个元素添加一些余量（可能是负数？）。在上面的代码片段中，我们在var bricks中包含了所有砖元素，我们可以再次迭代这些元素，如下所示：

Javascript代码

var bricksPerLine = Math.floor(bricks.length / (bricks_width / cont_width));
var bAlt = false;

for (var i = 0; i < bricks.length; i++) {
    if (i % bricksPerLine == 0) {
        if (!bAlt) {
            bAlt = true;
            bricks[i].style.marginLeft = '-20px'
        } else {
            bAlt = false;
        }
    }
}

JS-Fiddle

---

注意：如果您的网站使用自适应设计，则需要在每次调整大小时调用此代码。此外，正如您所看到的，代码可以在几个位置进行优化。