Question

<?php
    $i = 0;

    while($rows = mysqli_fetch_array($result))
    {
        if($i % 4 === 0) {
            echo "<ul>";
        }

        $i++;
?>

    <li><img src="<?php echo $rows['images'] ?>" /></li>
    <p><?php echo $rows['brand'] ?></p>

<?php echo "</li>";
        if ($i % 4 === 0) {
            $i = 0;
            echo "</ul>";
        } 
    }
?>

这是CSS代码

<style>
    li,p{    
        display:inline-block;
    }
</style>

<p>中的语音出现在图像旁边，但我希望它位于图像下方。如何实现这一目标？

Answer 1

您的HTML：

<?php
    $i = 0;

    while($rows = mysqli_fetch_array($result))

    {

    if($i % 4 === 0) {

        echo "<ul>";

    }
    $i++;
     ?>

<div class="img-with-text">
        <li><img src="<?php echo $rows['images'] ?>" alt="sometext" /></li>
        <p><?php echo $rows['brand'] ?></p>
    </div>

   <?php

    if($i % 4 === 0) {

        $i = 0;

        echo "</ul>";
    } 
}

?>

如果您知道图片的宽度，那么您的CSS：

.img-with-text {
    text-align: justify;
    width: [width of img];
}

.img-with-text img {
    display: block;
    margin: 0 auto;
}

否则图像下方的文字将自由流动。要防止这种情况，只需为容器设置宽度。

注意：div里面的列表是个坏主意。

SOURCE HERE

Answer 2

将CSS更改为此：

p {
    display: block;
}

在你的HTML中：

<li>
    <img src="<?php echo $rows['images'] ?>" alt="sometext" />
    <p><?php echo $rows['brand'] ?></p>
</li>

Answer 3

试试这个，顶部的图片和底部的文字

HTML：

<div class='staffDiv' style='float:left; margin:20px;'>
    <img class='staffPic' src='images/upload/846679vine1.jpg'/>
    <div style='clear:both'></div>
    <div class='staffDetails'>
        mark mark mark<br/>
    </div>
</div>

CSS：

.staffDiv{
  width:175px;
  margin:auto;
  border:1px solid #ffffff;
  margin-bottom:5px;
  background-color:#005500;
  }
 .staffPic{
  height:175px;
  width:175px;
  margin-bottom:0px;
  display:block;
  margin:auto;
  }

Answer 4

我通过将<ul></ul>替换为<table></table>并替换

来解决此问题

<li><img src="<?php echo $rows['images'] ?>" /></li>

<p><?php echo $rows['brand'] ?></p>

与

<tr>
<td><img src="<?php echo $rows['images'] ?>" /></li>
<p><?php echo $rows['brand'] ?></p></td></tr>

在CSS中，我使用了这段代码

tr{
display:inline-block;
width:200px;
}

感谢所有人的合作

如何在</p> <li>？</li>下显示<p>

4 个答案: