如何将右侧的文本框置于图片下方
如何将右侧的文本框置于图片下方
提问于 2020-11-08 18:57:53
正如你在图片中看到的，右边有一个方框，里面有一些文本和大量的空白。我的目标是让文字下的图片，而我有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>回答 1
Stack Overflow用户
发布于 2020-11-08 19:24:24
使用类而不是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反映它们，这取决于您使用的是什么
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64737270
复制相关文章
相似问题
腾讯云开发者
