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

我不确定我是否理解过，但也许您可以检查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来重新思考......

Answer 2

整个方法是不必要的。你根本不需要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/

如何计算同一行中的文章

2 个答案: