0

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

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

4

2 回答 2

0

我不确定我是否理解，但也许您可以检查 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 解决......

于 2013-11-04T19:34:28.840 回答
0

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

于 2013-11-04T19:36:46.837 回答