这是一个自动填充的图库,图像从子页面拉入。布局是:一行中有两个图像,它们必须分别左对齐和右对齐。
我想不出在他们之间加个空格的方法。
当我添加边距或填充时,第二个图像被推到下一行没有边距,它们并排排列(只有左边的正确对齐)因此,我认为交替使用CSS类可能可行,但不确定如何使奇数图像向左浮动,而偶数图像向右浮动。图像的奇数/偶数类将根据子帖子的数量(因此,导入此库页面的图像数量)而更改。
<div id="gallery-container">
<?php
$mypages = get_pages( array( \'child_of\' => $post->ID, \'sort_column\' => \'post_date\', \'sort_order\' => \'desc\' ) );
foreach( $mypages as $page ) {
$content = $page->post_content;
if ( ! $content ) // Check for empty page
continue;
$content = apply_filters( \'the_content\', $content );
?>
<div class="gallery-preview">
<div id="zoom">
<?php echo $content; ?>
<h3><a href="http://mettedesigns.com/gallery/<?php echo $page->post_title; ?>"><?php echo $page->post_title; ?></a></h3>
</div>
</div>
<?php
}
?>
<?php endwhile; endif; ?>
</div>
最合适的回答,由SO网友:bgallagh3r 整理而成
使用PHP模运算符(%)确定类,并使用CSS将它们全部向左浮动,然后将clear:right设置为奇数类。
很难想象没有代码的情况下你是如何提取图像的。你能发一段你用来拉这些图片的代码吗?
如果没有,您可以在页面加载后使用JS动态添加类。