0

我创建了一个 php 页面，其中包含一个 div 标签，其中包含一个从数据库获取链接的 PHP 代码，然后显示一个图像，所以现在当它查看 div 标签中的图像时，它会垂直显示图像，但我希望它显示给我图片 horzintilly，这是我的代码

<div class="pppi" style="width: 780px; height: 318px;overflow: auto; overflow-y: auto;">
 <?php
 $msqlq = mysql_query("SELECT * FROM `pictures` WHERE `to` = '$id'");
 while($fetchmsq = mysql_fetch_array($msqlq)){
 $pic = $fetchmsq['name'];
 $pics = "<div class='justprofile'><img src='uploaded/$pic'>&nbsp;&nbsp;";
 echo $pics;
 }
 ?>
</div>

所以这向我展示了这样 在此处输入图像描述

但我希望它看起来像这样 在此处输入图像描述

当我尝试使用 css并且所有图像都位于一个位置并且它们之间没有空格时top，我该如何解决这个问题。rightposition:absolute

4

4 回答 4

2

在 PHP 的 HTML 输出中，您忘记关闭<div>元素。将行更改为$pics：

$pics = "<div class='justprofile'><img src='uploaded/$pic'></div>";

在您的 CSS 中，执行以下操作：

.justprofile {
    float: left;
}

您可以通过指定边距在图像之间添加空间，如下所示：

.justprofile {
    float: left;
    margin-right: 1em;
}
于 2013-07-30T19:55:53.530 回答
2

附加到您的 .css 文件。用于对齐使用float和图像之间的一点空间使用margin-right

div.justprofile {
   float: left;
   margin-right: 5px;
}
于 2013-07-30T19:58:40.227 回答
1

float:left您需要在样式中（或在类中）添加包含图像的 div以水平显示元素。尝试这个：

<div class="pppi" style="width: 780px; height: 318px;overflow: auto; overflow-y: auto;">
 <?php
 $msqlq = mysql_query("SELECT * FROM `pictures` WHERE `to` = '$id'");
 while($fetchmsq = mysql_fetch_array($msqlq)){
 $pic = $fetchmsq['name'];
 $pics = "<div class='justprofile' style="float:left;"><img src='uploaded/$pic'>&nbsp;&nbsp;</div>";
 echo $pics;
 }
 ?>
<div style="clear:both;"></div>
</div>

最好的解决方案是在你的 css 中像这样在你的类中放置浮动：

.justprofile{
   float:left;
}
于 2013-07-30T19:55:39.603 回答
1

不需要漂浮任何东西。<img>默认情况下，标签的行为类似于内联。只需删除您的<div>代码：

$pics = "<img src='uploaded/$pic'>&nbsp;&nbsp;";

或者，如果您想像float其他人指出的那样使用 CSS 的属性，请不要忘记关闭您div的 s：

$pics = "<div class='justprofile'><img src='uploaded/$pic'></div>";
于 2013-07-30T19:57:07.127 回答