对齐它以正确显示的最佳方法是什么,如下图所示:
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 标记是 Not Acceptable ,请告诉我,我会尝试做其他事情。 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:
隐藏每篇文章,然后仅显示与所选缩略图对应的文章。
$('.article-thumbnail').click(function() {
$('.article-entry').css({"display": "none"});
$('#article-'+$(this).data("num")).css({"display": "block"});
});
UPD:现在无法自行测试。但是你可以尝试像下面这样的东西: 首先阅读关于 WP_Query如果还没有。 您可以抓取所有帖子:
&get_posts()
然后结合简单的 php 循环和
next_post()
您可以在添加缩略图之前显示您想要的确切帖子数。 希望它能以某种方式帮助你。
如果这没有帮助,您可以在显示缩略图的循环内嵌套显示文章的循环,并在每运行三次 tumbnail_loop 后运行 articles_loop 以显示其中的三个并返回到 tumbnail_loop。
关于javascript - HTML/CSS/jQuery 换行问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15942119/