对齐它以正确显示的最佳方法是什么,如下图所示:
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/