Php 确保a<；p>；坐在沙发下面

我很难将一行文本直接放在div下面。为了让您了解我的代码或可以描绘我的代码，div包含一个从我的数据库中提取的图像，用户的名字和姓氏也被提取，但位于图像下。我希望这可以解释以下情况：

 <div id="latest">
    <?php 
        $query = 'SELECT f.*, m.firstname AS firstname, m.lastname AS lastname FROM folio AS f, members AS m WHERE f.userid = m.id ORDER BY dateadded DESC';
        $result = mysqli_query($connection, $query);
        if(!$result){
            die('Database error: '.mysqli_error($connection));
        }
        while($row = mysqli_fetch_assoc($result)){
            ?>
    <a href="#inline1" style="text-decoration:none;" class="fancybox" >
    <div class="outimgbox"> <a style="text-decoration: none;" class="fancybox fancybox.ajax" rel="gallery<?php echo $row['userid']; ?>" data-fancybox-type="ajax" href="profile_image_fancybox.php?imgid=<?php echo $row['imgid']; ?>">
      <div id="mainwrapper">
        <div id="box-3" class="box"> <img class="uploads"  src="uploads/folio/<?php echo $row['filename']; ?>" /> <span class="caption fade-caption">
          <h3><?php echo $row['title']; ?></h3>
          <p style="color: #2d2d2d; font-size: 12px; padding-left:2px; text-decoration: none;"><?php echo 'by' ."&nbsp;". $row['firstname'] ."&nbsp;". $row['lastname'];  ?></p>
          </span> </div>
      </div>
      </a> </div>
        <p>
            <?php echo 'by' ."&nbsp;". $row['firstname'] ."&nbsp;". $row['lastname'];  ?>
        </p>
    <?
        }
        ?>
  </div>
</div>

---

图像后面的span元素会把事情搞砸。您需要将图像和以下文本包装在块级元素中。你可以使用div（如果你喜欢html5，也可以使用figure和figcaption）。

图像后面的span元素会把事情搞砸。您需要将图像和以下文本包装在块级元素中。如果你喜欢html5，你可以使用div（或者figure和figcaption）。

我认为WhistToe的意思是这样的。用div替换span，因为您不希望它在同一行上，对吗

<div id="mainwrapper">
    <div id="box-3" class="box">
        <img class="uploads"  src="uploads/folio/<?php echo $row['filename']; ?>" />
        <div class="caption fade-caption">
            <h3><?php echo $row['title']; ?></h3>
            <p style="color: #2d2d2d; font-size: 12px; padding-left:2px; text-decoration: none;"><?php echo 'by' ."&nbsp;". $row['firstname'] ."&nbsp;". $row['lastname'];  ?></p>
        </div>
    </div>
</div>

" />

我认为WhistToe的意思是这样的。将span替换为div，因为您不希望它位于同一行，对吗

<div id="mainwrapper">
    <div id="box-3" class="box">
        <img class="uploads"  src="uploads/folio/<?php echo $row['filename']; ?>" />
        <div class="caption fade-caption">
            <h3><?php echo $row['title']; ?></h3>
            <p style="color: #2d2d2d; font-size: 12px; padding-left:2px; text-decoration: none;"><?php echo 'by' ."&nbsp;". $row['firstname'] ."&nbsp;". $row['lastname'];  ?></p>
        </div>
    </div>
</div>

" />

您的代码有很多错误
首先，在图像和p之间有一个h3
其次，将span作为p的容器
在这种设置下，您试图实现的目标是不可能的，您的代码验证也将是不可能的
请尝试以下方法：

  <div id="box-3" class="box"> 
   <h3><?php echo $row['title']; ?></h3>
   <p>
    <img class="uploads"  src="uploads/folio/" />
   </p>
   <p id="whatever" style="color: #2d2d2d; font-size: 12px; padding-left:2px; text-decoration: none;">
   <?php echo 'by' ."". $row['firstname'] ."". $row['lastname'];  ?>
  </p>
 </div>
 

这将删除两个p之间的所有空格，文本将位于图像的正下方（只要图像没有任何填充或边距）

---

希望解释清楚，答案有帮助。

您的代码有很多错误
首先，在图像和p之间有一个h3
其次，将span作为p的容器
在这种设置下，您试图实现的目标是不可能的，您的代码验证也将是不可能的
请尝试以下方法：

  <div id="box-3" class="box"> 
   <h3><?php echo $row['title']; ?></h3>
   <p>
    <img class="uploads"  src="uploads/folio/" />
   </p>
   <p id="whatever" style="color: #2d2d2d; font-size: 12px; padding-left:2px; text-decoration: none;">
   <?php echo 'by' ."". $row['firstname'] ."". $row['lastname'];  ?>
  </p>
 </div>
 

这将删除两个p之间的所有空格，文本将位于图像的正下方（只要图像没有任何填充或边距）

---

希望解释清楚，答案有帮助。

由于您在“#mainwrapper.box”上使用了“float”，如果希望元素显示在下方而不是侧面，则需要使用“clear:left”

例如：

Html:

---

由于在“#mainwrapper.box”上使用了“float”，如果希望元素显示在下方而不是侧面，则需要使用“clear:left”

例如：

Html:

---

---

或者更好的是提供一个演示问题的例子，或者更好的是提供一个演示问题的例子，你可以通过编辑我的小提琴给我举个例子吗？我已经尝试了很多方法，但仍然无法达到最终结果。jsfiddle.net/vxeTC/1只是为了让我正确理解：这是您想在image div下排列的姓段落，还是包装中的文本？是我没有正确解释，我最初确实希望名称位于顶部，所以当你将其悬停时，它会使图像变模糊，名称会出现，但我希望名称位于图像下方，当你将其悬停在图像div上时，名称会静止显示，好吗；给我一秒钟来更新解决方案。我想我能帮上忙。你能给我举个例子吗？也许可以编辑一下我的小提琴？我已经尝试了很多方法，但仍然无法达到最终结果。jsfiddle.net/vxeTC/1只是为了让我正确理解：这是您想在image div下排列的姓段落，还是包装中的文本？是我没有正确解释，我最初确实希望名称位于顶部，所以当你将其悬停时，它会使图像变模糊，名称会出现，但我希望名称位于图像下方，当你将其悬停在图像div上时，名称会静止显示，好吗；给我一秒钟来更新解决方案。我想我有点需要帮助。从你的代码中有一件事已经解决了，那就是用户名现在是一个链接，但是名称仍然位于图像的右侧…从你的代码中有一件事已经解决了，那就是用户名现在是一个链接，但是名称仍然位于图像的右侧…您有示例吗？您有示例吗？抱歉，我不能解释我自己，我希望当您将鼠标悬停在图像上方时，名字和姓氏显示在下方，就像当前它们在图像上方淡出时出现在div中一样，因此，我希望名称在下方的悬停中淡入…我可以更新答案，使名称在默认情况下不显示。然而，使它们显示在图像悬停不能通过CSS；你必须使用JavaScript。检查my answer update以使名称在默认情况下不可见。如果您检查my JSFIDLE，它确实会显示在悬停图像的顶部，但我希望它位于图像的下方。当我想到它的时候，我并没有太在意它出现在悬停上。谢谢你。我真的很感激你给我的时间，这对每个人都是一样的！对不起，我不能解释我自己，我想让名字和姓氏在你将鼠标悬停在图像上时显示在下方，就像它们在图像上淡出时显示在div中一样，所以我想让名字在鼠标悬停在下方时淡出…我可以更新答案，使名字在默认情况下不显示。然而，使它们显示在图像悬停不能通过CSS；你必须使用JavaScript。检查my answer update以使名称在默认情况下不可见。如果您检查my JSFIDLE，它确实会显示在悬停图像的顶部，但我希望

<div class="float">
    ...
</div>

<p class="clear">
    ...
</p>

.float { width: 30%; float: left; }

.clear { clear: left; }