3

无论我尝试什么，它都无法正常工作。

基本上我有一个图像列表，这些图像填​​满了我的整个 div 的宽度和高度。现在我只想在每个图像下方添加一些标题。我尝试的一切要么使图像全部垂直排列在一条线上，等等。

非常感谢我能得到的任何帮助！

<div id="index-gallery" style="float:left; padding:5px; margin:10px 0 0 0;">
     <? $ires3 = mysql_query("select `id`,`mp4`,`cover` from `d2pxhd`.`videos` WHERE `duration`>'0' AND `active`='1' AND `suspended`='0' AND `add_date`<now() ORDER BY `add_date` DESC limit 24",$db);
         while ($img3 = mysql_fetch_assoc($ires3)) {  ?>     
          <a href="/?play=<?=base64_encode(preg_replace('/\s+/', '', $img3['id']));?>&start=1">
          <img style="margin:20px 2px;" width="118" height="100" border="0" src="<?=$img3['cover']."002.jpg";?>"></a>

   SUBTITLE HERE!!!

        <? } ?>
  </div>
4

2 回答 2

4

尝试这个...

HTML/PHP

<div id="index-gallery">
  <?php $ires3 = mysql_query("select `id`,`mp4`,`cover` from `d2pxhd`.`videos` WHERE `duration`>'0' AND `active`='1' AND `suspended`='0' AND `add_date`<now() ORDER BY `add_date` DESC limit 24",$db);
    while ($img3 = mysql_fetch_assoc($ires3)) : ?>

      <div class="img-box">
        <a href="/?play=<?=base64_encode(preg_replace('/\s+/', '', $img3['id']));?>&start=1">
          <img style="margin:20px 2px;" width="118" height="100" border="0" src="<?=$img3['cover']."002.jpg";?>">
        </a>
        <p>SUBTITLE HERE!!!</p>
      </div>

    <?php endwhile; ?>

  <div class="clear-both"></div>

</div>

CSS

#index-gallery {
  width:100%;
}

.img-box {
  float:left;
  padding:5px;
  margin:10px 0 0 0;
}

.img-box a, .img-box img {
  display:block;
}

.clear-both {
  clear:both;
}

每行中的固定列数（以获得更一致的格式）

<?php $cols = 4; ?>

<div id="index-gallery">
  <?php $ires3 = mysql_query("select `id`,`mp4`,`cover` from `d2pxhd`.`videos` WHERE `duration`>'0' AND `active`='1' AND `suspended`='0' AND `add_date`<now() ORDER BY `add_date` DESC limit 24",$db); ?>

   <?php while ($img3 = mysql_fetch_assoc($ires3)) : ?>

     <?php for($i=1; $i <= $cols; $i++) : ?>

        <div class="img-box">
          <a href="/?play=<?=base64_encode(preg_replace('/\s+/', '', $img3['id']));?>&start=1">
            <img style="margin:20px 2px;" width="118" height="100" border="0" src="<?=$img3['cover']."002.jpg";?>">
          </a>
          <p>SUBTITLE HERE!!!</p>
        </div>

        <?php if($i == $cols) : ?>
          <div class="clear-both"></div>
        <?php $i=1; endif; ?>

      <?php endfor; ?>

    <?php endwhile; ?>

  <div class="clear-both"></div>

</div>
于 2013-04-14T08:29:23.173 回答
3

看一下这个。

JSFIDDLE 示例

HTML

<div id="index-gallery">
    <div class="item">
        <img src="http://movingimages.files.wordpress.com/2009/10/earth-simulator-offers-peaks-into-our-planetary-future.jpg?w=780" alt=""/>
        <p>My Caption here</p>
    </div>

    <div class="item">
        <img src="http://movingimages.files.wordpress.com/2009/10/earth-simulator-offers-peaks-into-our-planetary-future.jpg?w=780" alt=""/>
        <p>My Caption here</p>
    </div>

    <div class="item">
        <img src="http://movingimages.files.wordpress.com/2009/10/earth-simulator-offers-peaks-into-our-planetary-future.jpg?w=780" alt=""/>
        <p>My Caption here</p>
    </div>

    <div class="item">
        <img src="http://movingimages.files.wordpress.com/2009/10/earth-simulator-offers-peaks-into-our-planetary-future.jpg?w=780" alt=""/>
        <p>My Caption here</p>
    </div>
</div>

CSS

.item{
    width:200px;
    text-align:center;
    display:block;
    background-color: #ededed;
    border: 1px solid black;
    margin-right: 10px;
    margin-bottom: 10px;
    float:left;
}

#index-gallery{
    width:465px;
}
于 2013-04-14T08:34:22.837 回答