将此对齐以正确显示的最佳方法是什么,如下图所示：

Html标记：

<div id="main">
    <div id="article-thumbnail-1" class="article-thumbnail">
        <div class="article-open"><img src=".../article-open.png" /></div>
        <div class="article-close"><img src=".../artcle-close.png" /></div>
    </div>
    <article id="article-1" class="article-entry">
        <header class="article-header">
            <h2>This is the article 1 text</h2>     
        </header>
        <div class="article-body">
            <p>This is the article 1 body</p>       
        </div>
    </article>

    <div id="article-thumbnail-2" class="article-thumbnail">
        <div class="article-open"><img src=".../article-open.png" /></div>
        <div class="article-close"><img src=".../artcle-close.png" /></div>
    </div>
    <article id="article-2" class="article-entry">
        <header class="article-header">
            <h2>This is the article 2 text</h2>     
        </header>
        <div class="article-body">
            <p>This is the article 2 body</p>       
        </div>
    </article>

    <div id="article-thumbnail-3" class="article-thumbnail">
        <div class="article-open"><img src=".../article-open.png" /></div>
        <div class="article-close"><img src=".../artcle-close.png" /></div>
    </div>
    <article id="article-3" class="article-entry">
        <header class="article-header">
            <h2>This is the article 3 text</h2>     
        </header>
        <div class="article-body">
            <p>This is the article 3 body</p>       
        </div>
    </article>

    <div id="article-thumbnail-4" class="article-thumbnail">
        <div class="article-open"><img src=".../article-open.png" /></div>
        <div class="article-close"><img src=".../artcle-close.png" /></div>
    </div>
    <article id="article-4" class="article-entry">
        <header class="article-header">
            <h2>This is the article 4 text</h2>     
        </header>
        <div class="article-body">
            <p>This is the article 4 body</p>       
        </div>
    </article>

    <div id="article-thumbnail-5" class="article-thumbnail">
        <div class="article-open"><img src=".../article-open.png" /></div>
        <div class="article-close"><img src=".../artcle-close.png" /></div>
    </div>
    <article id="article-5" class="article-entry">
        <header class="article-header">
            <h2>This is the article 5 text</h2>     
        </header>
        <div class="article-body">
            <p>This is the article 5 body</p>       
        </div>
    </article>

    <div id="article-thumbnail-6" class="article-thumbnail">
        <div class="article-open"><img src=".../article-open.png" /></div>
        <div class="article-close"><img src=".../artcle-close.png" /></div>
    </div>
    <article id="article-6" class="article-entry">
        <header class="article-header">
            <h2>This is the article 6 text</h2>     
        </header>
        <div class="article-body">
            <p>This is the article 6 body</p>       
        </div>
    </article>
</div>

所以基本上如果你点击一个img缩略图文章应该出现在它下面,就像在这张图片中：

我有问题,当打开文章并在其下方显示时,保持缩略图布局.

基本上,当您单击缩略图时,文章应显示在单击缩略图所在的缩略图行下方.

注意,我正在为wordpress主题这样做.

JSFIDDLE：http://jsfiddle.net/PkZrZ/

最佳答案 这是最简单的解决方案.它取决于tumbnail的数据属性.因此,如果将数据属性添加到tumbnail标记是不可接受的,请告诉我,我会尝试做其他事情.

http://jsfiddle.net/d3D9p/

我改变了元素的顺序.三篇文章中有三篇文章.
(第四至第六)

<div id="main">
<div class="article-thumbnail" data-num="1">
    <div class="article-open"><img src="" /></div>
    <div class="article-close"><img src="" /></div>
</div>


<div class="article-thumbnail" data-num="2">
    <div class="article-open"><img src="" /></div>
    <div class="article-close"><img src="" /></div>
</div>
<div class="article-thumbnail" data-num="3">
    <div class="article-open"><img src="" /></div>
    <div class="article-close"><img src="" /></div>
</div>
<article id="article-1" class="article-entry">
    <header class="article-header">
        <h2>This is the article 1 text</h2>     
    </header>
    <div class="article-body">
        <p>This is the article 1 body</p>       
    </div>
</article>
<article id="article-2" class="article-entry" >
    <header class="article-header">
        <h2>This is the article 2 text</h2>     
    </header>
    <div class="article-body">
        <p>This is the article 2 body</p>       
    </div>
</article>
<article id="article-3" class="article-entry">
    <header class="article-header">
        <h2>This is the article 3 text</h2>     
    </header>
    <div class="article-body">
        <p>This is the article 3 body</p>       
    </div>
</article>

还有新的jquery：

隐藏每篇文章,然后仅显示与所选tumbnail相对应的内容.

$('.article-thumbnail').click(function() {
    $('.article-entry').css({"display": "none"});
    $('#article-'+$(this).data("num")).css({"display": "block"});
});

UPD：现在不能自己测试.但你可以试试像folow：
首先阅读关于WP_Query,如果还没有.
你可以抓住所有帖子：

&get_posts()

然后结合简单的PHP循环和

next_post() 

在添加tumbnail之前,您可以显示您想要的确切帖子数量.
希望它能以某种方式帮助你.

如果这没有帮助,你可以嵌套循环,在循环中显示将显示缩略图的文章,并在每次运行tumbnail_loop后运行articles_loop,将显示其中的三个并返回到tumbnail_loop.