Question

我需要将一些浮动的div放在容器内。我正在使用的代码工作，但我需要最后一行浮动元素与左对齐而不是居中。这是一个相册，所有缩略图都是由图库脚本自动生成的。

我不认为单独使用css是可能的，也许是一些jquery或php ...

CSS

#gallery {
    background-color: #ffffff;
    border: 1px solid #999999;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    text-align: center;
    width: 750px;
}

.image {*display:inline;
    background: #F7F9FD;
    border: 1px solid #E7F0F5;
    display: -moz-inline-stack;
    display: inline-block;
    line-height: 100%;
    margin: 1em;
    padding: 0;
    text-align:left;vertical-align:top;
    zoom:1;
}

.imagethumb a, .imagethumb a:hover {
    border:0;
    display: block;
    margin: 5px;
}

.imagethumb {float: left;}

.clear {clear: both}

PHP代码

<div id="gallery">
<?php while (next_image(false, $firstPageImages)): ?>
<div class="image">
<div class="imagethumb">
<a href="<?php echo htmlspecialchars(getImageLinkURL());?>" title="<?php echo getBareImageTitle();?>"><?php printImageThumb(getAnnotatedImageTitle()); ?></a>
</div>
</div>
<?php endwhile; ?>
</div>

生成的HTML

<div id="gallery">

<div id="images">

<div class="image">
<div class="imagethumb"><a href="/zen/p101-01.jpg.php" title="p101-01"><img src="/zen/cache/p101-01_110_thumb.jpg" alt="p101-01" /></a></div>
</div>
<div class="image">
<div class="imagethumb"><a href="/zen/p101-02.jpg.php" title="p101-02"><img src="/zen/cache/p101-02_110_thumb.jpg" alt="p101-02" /></a></div>
</div>
<div class="image">
<div class="imagethumb"><a href="/zen/p101-04.jpg.php" title="p101-04"><img src="/zen/cache/p101-04_110_thumb.jpg" alt="p101-04" /></a></div>
</div>
[...]
</div>

Answer 1

不确定你正在做什么与所有那些麻烦黑客..没有jquery或PHP需要。只是css。

这对我来说很好。我确实在图像上添加了宽度和高度，因为我觉得我不想拍摄图像。但它完全一样。

<强> CSS

#gallery { background-color: #fff; border: 1px solid #999; margin: 0 auto; overflow: hidden; position: relative; text-align: center; width: 750px; }
.imagethumb a, 
.imagethumb a:hover { border:0; display: block; margin: 5px; }
.imagethumb {float: left; margin:5px; background: #F7F9FD; border: 1px solid #E7F0F5; width:100px; height:200px;} 
.clear {clear: both}

HTML最终输出

<div id="gallery">
    <div id="images">
        <div class="imagethumb"><a href="/zen/p101-01.jpg.php" title="p101-01"><img src="/zen/cache/p101-01_110_thumb.jpg" alt="p101-01" /></a></div>
    <div class="imagethumb"><a href="/zen/p101-01.jpg.php" title="p101-01"><img src="/zen/cache/p101-01_110_thumb.jpg" alt="p101-01" /></a></div>
    <div class="imagethumb"><a href="/zen/p101-01.jpg.php" title="p101-01"><img src="/zen/cache/p101-01_110_thumb.jpg" alt="p101-01" /></a></div>
    <div class="imagethumb"><a href="/zen/p101-01.jpg.php" title="p101-01"><img src="/zen/cache/p101-01_110_thumb.jpg" alt="p101-01" /></a></div>
    <div class="imagethumb"><a href="/zen/p101-01.jpg.php" title="p101-01"><img src="/zen/cache/p101-01_110_thumb.jpg" alt="p101-01" /></a></div>
    <div class="imagethumb"><a href="/zen/p101-01.jpg.php" title="p101-01"><img src="/zen/cache/p101-01_110_thumb.jpg" alt="p101-01" /></a></div>
    <div class="imagethumb"><a href="/zen/p101-01.jpg.php" title="p101-01"><img src="/zen/cache/p101-01_110_thumb.jpg" alt="p101-01" /></a></div>
    <div class="imagethumb"><a href="/zen/p101-01.jpg.php" title="p101-01"><img src="/zen/cache/p101-01_110_thumb.jpg" alt="p101-01" /></a></div>
    <div class="imagethumb"><a href="/zen/p101-01.jpg.php" title="p101-01"><img src="/zen/cache/p101-01_110_thumb.jpg" alt="p101-01" /></a></div>
    <div class="imagethumb"><a href="/zen/p101-01.jpg.php" title="p101-01"><img src="/zen/cache/p101-01_110_thumb.jpg" alt="p101-01" /></a></div>
    </div>
  <div class="clear"></div>
</div>

Answer 2

你可以用左边填充左边整个东西，并获得相同的结果。

或者，您可以将所有内容对齐并将其放在另一个居中的div容器中。

中心浮动除了最后一行

2 个答案: