如何计算同一行中的文章

How to count articles in same line

本文关键字：一行 文章 何计算 计算      更新时间：2023-09-26

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

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 中的文章数量。我想计算一行中显示的文章。我该怎么做？

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

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

一件重要的事情 - 如果你的文章将开始打破新行，这意味着你正面临空白问题。要修复它，您必须在每篇文章的结束标签和下一篇文章的打开之间不留空格。而不是例如这个：

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

您必须执行以下操作：

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

下面是一个示例，以了解其工作原理： http://jsfiddle.net/PsFNF/1/

我不确定我是否理解，但也许您可以检查 CSS 属性，然后将其与系统组合以检查窗口的宽度。无论如何，我为您准备了这个快速入门，希望它有用：

<!doctype html>
<meta charset="utf-8">
<title>project</title>
<style>
article{ width: 200px; margin:2px; }
.inline{ float:left;}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js" ></script>
<script>
    $(function(){                                                                                                        
        $("article").each(function(){
            if($(this).css("float")==="left")
                $(this).css("color","steelblue")
            else
                $(this).css("color","gray")
        })
  });
</script>
<body>
<div id="projects">
<article class="inline"><h1>1</h1> Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet </article>
<article class="inline"><h1>2</h1> Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet </article>
<article class="inline"><h1>3</h1> Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet </article>
<article class="inline"><h1>4</h1> Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet </article>
<article><h1>5</h1> Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet </article>
<article><h1>6</h1> Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet </article>
<article><h1>7</h1> Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet </article>
<article><h1>8</h1> Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet </article>
</div>

无论如何，我认为您的问题可以重新考虑用纯 css 解决......

相关文章：