Javascript HTML/CSS/jQuery包装问题

要正确显示，最好的对齐方式是什么，如下图所示：

HTML标记：

这是第1条案文
这是第1条的主体

这是第2条案文
这是第2条的主体

这是第3条案文
这是第3条的主体

这是第4条案文
这是第4条的主体

这是第5条案文
这是第5条的主体

这是第6条案文
这是第6条的主体

以下是最简单的解决方案。它取决于tumbnail的数据属性。所以，如果将数据属性添加到tumbnail标记是不可接受的，请告诉我，我将尝试做其他事情。

我改变了元素的顺序。三篇文章后面有三根图钉。 （第四至第六条相同）

UPD:现在无法亲自测试。但您可以尝试以下方法： 首先，如果还没有，请阅读。 您可以抓取所有帖子：

&get_posts()

然后结合简单的php循环和

next_post() 

在添加tumbnail之前，您可以显示想要发布的确切数量。 希望它能帮助你

---

如果这没有帮助，您可以嵌套循环，在循环中显示文章，该循环将显示缩略图，每运行三次tumbnail\u循环后，运行文章\u循环，该循环将显示其中三个并返回tumbnail\u循环。

您的标记如下：

<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>

var prev;
$('.article-thumbnail').click(function() {
    var _target= $(this).data("target");
    var _current=$('#'+_target);
    var hideCss={'height':'0px'};
    var showCss={'height':'200px'};

    if(prev){
        prev.hide();
        prev.parent().stop().animate(hideCss,1000);
    }
    _current.show();
    _current.parent().stop().animate(showCss,1000);

    prev= _current
});

看到这个了吗

i、 e

---

你能设置一把小提琴来演奏吗？它被添加了，小提琴的例子它总是有3个盒子宽吗？是的，它会有。你可以考虑盒子的尺寸固定。只是飞过去，但是竖起大拇指准备好一个很好的格式化问题。不是经常看到这个！它似乎工作正常，将在wordpress中进行测试。（我清除了小提琴）。现在在wordpress中测试了一点之后，我意识到它不起作用，因为wordpress循环使用了一个while（），我只能将所有的艺术品或所有的缩略图放在一起。这很好，但不能用于Wordpress循环。此页面基本上是一个类别arhive列表。

<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>

|<Upper Thumbnails Section>|
^^^^^^^^^^^^^^^^^^^^^^^^^^^
|<upper article container>| //invisible by default

|<Lower Thumbnails Section>|
^^^^^^^^^^^^^^^^^^^^^^^^^^^
|<lower article container>| //invisible by default

<div class="article-thumbnail" data-target="article-1" >
     ..
     ..
</div>
<div class="article-thumbnail" data-target="article-2" >
     ..
     ..
</div>
<div class="article-thumbnail" data-target="article-3" >
     ..
     ..
</div>

<div class="container">
   <article id="article-1" class="article-entry">
   </article>
   <article id="article-2" class="article-entry">
   </article>
   <article id="article-3" class="article-entry">
   </article>
 </div>

var prev;
$('.article-thumbnail').click(function() {
    var _target= $(this).data("target");
    var _current=$('#'+_target);
    var hideCss={'height':'0px'};
    var showCss={'height':'200px'};

    if(prev){
        prev.hide();
        prev.parent().stop().animate(hideCss,1000);
    }
    _current.show();
    _current.parent().stop().animate(showCss,1000);

    prev= _current
});