CSS混乱 - 图片下方的文本

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>

- thevoipman

---

你尝试将外部的 div 放在 while 循环内部了吗？ - m.spyratos

是的，我有...你有什么建议吗？也许我可以尝试一下你心中的想法。 - thevoipman

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>

- m.spyratos

---

这个程序完成了90%的工作 - 由于某种原因，第一行没有对齐，但之后的所有内容都对齐得非常好... - thevoipman

你知道每一行会有多少张图片吗？这是一个固定的数字吗？ - m.spyratos

另外，请问您有网址可以让我现场查看吗？ - m.spyratos

哈哈哈，哦，好吧，我会尽量让字幕简短。 - thevoipman

只需尝试在每一行后添加<div style="clear:both;"></div>。如果需要，我会更新我的答案... - m.spyratos

Answer 2

请看这个。

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

- 1337holiday