如何获取图片下方右侧的文本框

Question

正如您在图片中看到的，右侧有一个带有一些文字和大量空白的框。 我的目标是在图片下方有文字，而我连续有 3 张图片很好地对齐。 当我尝试此操作时，图片不再对齐或图片不再裁剪。 我希望每张图片都具有相同的尺寸并且仍然清晰，但是后来出现了这个问题。

#content {
    width: 100%;
    max-width: 100%;
    margin: 20px auto;
}

form {
    width: 50%;
    margin: 20px auto;
}

form div {
    margin-top: 5px;
}

#img_div {
    width: 30%;
    margin-left: 2%;
    margin-right: 1%;
    margin-bottom: 3%;
    border: 2px solid #d8680c;
    float: left;
}

#img_div:after {
    content: "";
    display: block;
    clear: both;
}

img {
    float: left;
    object-fit: cover;
    width: 250px;
    height: 250px;
}

#pictext {
    word-wrap: break-word;
}

<div id="content">
    <?php
    while ($row = mysqli_fetch_array($result)) {
        echo "<div id='img_div'>";
        echo "<img src='fotopage\images/" . $row['image'] . "' >";
        echo "<p id='pictext'>" . $row['image_text'] . "</p>";
        echo "</div>";
    }
    ?>
</div>

Answer 1

使用类而不是使用 ID

ID 必须是唯一的，当您执行循环时，会有其他一些具有相同 ID 的 div

这样添加

 <?php
    while ($row = mysqli_fetch_array($result)) {
        echo "<div class='img_div'>";
        echo "<img src='fotopage\images/" . $row['image'] . "' >";
        echo "<p class='pictext'>" . $row['image_text'] . "</p>";
        echo "</div>";
    }
    ?>

确保通过 JS 或 JQuery 反映它们取决于您使用的是什么