Question

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

基本上我有一个图像列表，可以填满我整个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>

Answer 1

试试这个......

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

Answer 2

检查一下。

<强> JSFIDDLE EXAMPLE

<强> 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;
}

CSS mess - 图像下方的文字

2 个答案: