javascript - 如何统计同一行的文章

Question

我正在我的网站上工作，我想让它响应。我想将文章数量集中在一行中。当有三个内联显示时，宽度必须改变。我想使用我发现的这个脚本来做到这一点:

var numofDivs = $("#projects > article").size();
    if (numofDivs = 4){
        var projects = document.getElementById("projects");
        projects.style.backgroundColor="black";
    } else if (numofDivs = 3){
        var projects = document.getElementById("projects");
        projects.style.backgroundColor="grey";
    }

但是这个统计的是整个div中的文章数。我想计算一行中显示的文章。我该怎么做？

Answer 1

整个方法是不必要的。你根本不需要javascript。要使这些文章居中，您需要将 text-align: center 添加到父级并将 display: inline-block 设置到文章本身。您需要的所有 CSS 是:

#projects {
    text-align: center;
}
#projects > article {
    display: inline-block;
}

一件重要的事情 - 如果您的文章开始换行，则意味着您面临空白问题。要修复它，您必须在每篇文章的 closing 标记和下一篇文章的 opening 标记之间不留空格。而不是例如这个:

<article>
    ...
</article>

<article>
    ...
</article>

你必须这样做:

<article>
    ...
</article><article>
    ...
</article><article>
    ...
</article>

这里有一个例子来了解它是如何工作的:http://jsfiddle.net/PsFNF/1/