1

我正在使用 WordPress NextGEN Gallery 将固定宽度的图像放置在一个 fluid-width<aside>中。我希望图像与<aside>容器的右侧对齐，但是如果我尝试将它们向右浮动，则顺序会颠倒。我也不能简单地颠倒 WordPress 中图像的顺序，因为图像的列数随浏览器窗口的不同而变化。

有没有办法将这些图像向右对齐而不浮动它们？我已经尝试text-align:right在每个图像及其容器上进行设置，但没有任何效果。

PHP/HTML：

<!-- Thumbnails -->
    <?php foreach ( $images as $image ) : ?>

    <div id="ngg-image-<?php echo $image->pid ?>" class="ngg-gallery-thumbnail-box" <?php echo $image->style ?> >
        <div class="ngg-gallery-thumbnail" >
            <a href="<?php echo $image->imageURL ?>" title="<?php echo $image->description ?>" <?php echo $image->thumbcode ?> >
                <?php if ( !$image->hidden ) { ?>
                <img title="<?php echo $image->alttext ?>" alt="<?php echo $image->alttext ?>" src="<?php echo $image->thumbnailURL ?>" <?php echo $image->size ?> />
                <?php } ?>
            </a>
        </div>
    </div>

CSS：（大部分继承自 NextGen Gallery）

.ngg-galleryoverview {
    overflow: hidden;
    clear:both; 
    display:block !important;
    float:right;
    text-align:right;
    margin-top:18px;
    width:100%;
}

.ngg-galleryoverview .desc {
/* required for description */
   margin:0px 10px 10px 0px;
   padding:5px;
}

.ngg-gallery-thumbnail-box {
    display:inline;
}

.ngg-gallery-thumbnail {
    display:inline;
    text-align: center;
}

.ngg-gallery-thumbnail img {
    display:inline;
}

.ngg-gallery-thumbnail img {
    background-color:#FFFFFF;
    border:1px solid #A9A9A9;
    display:block;  
    margin:4px 0px 4px 5px;
    padding:4px;
    position:relative;
    float:left;
}
4

1 回答 1

1

不确定您是否可以在代码中执行此操作，但如果您将 a 包装img在 ap并设置text-align在 上p，一切都会解决。

<p><img src="" /></p>

p{text-align:right;}

http://jsfiddle.net/jasongennaro/x3Lx4/

于 2011-07-10T01:51:43.083 回答