Son satır dışında Merkezi şamandıra

2 Cevap php

Ben bir kap içinde bazı süzülüyor divs ortalamak gerekiyor. Kodu eserlerini kullanıyorum ama ben merkezli değil sola hizalanması süzülüyor elemanların son satır gerekir ve. Bu bir fotoğraf albümü ve tüm küçük resimleri otomatik olarak bir galeri komut dosyası tarafından oluşturulur.

This is what the code produces

This is what I need

Bunu yalnız css ile mümkün olduğunu sanmıyorum, belki biraz jquery veya 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}

The PHP code

<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>

Generated 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>

2 Cevap

Sadece align sol dolgu ile her şeyi bıraktı ve aynı sonucu elde edebiliriz.

Veya, sol her şeyi uyum ve merkezli bir başka div kaba koyun olabilir.

Değil tüm bu nast kesmek ile ne yapıyorsun emin .. jquery veya php ihtiyaç yok. sadece css.

Bu benim için çalışıyor. Ben aslında bir görüntü almak gibi hissetmedim çünkü ben görüntülerde genişlikleri ve yükseklikleri eklemek yaptı. onun tüm aynı buts.

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 Final Output

<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>

etiketler