使用css定位div标签

Question

我创建了一个包含div代码的php页面，该代码包含从数据库获取链接的PHP代码，然后显示图像，所以现在当它在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'><img src='uploaded/$pic'>&nbsp;&nbsp;";
 echo $pics;
 }
 ?>
</div>  

所以这就是这样的

但我希望它看起来像这样

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

Answer 1

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

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

在CSS中，执行：

.justprofile {
    float: left;
}

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

.justprofile {
    float: left;
    margin-right: 1em;
}

Answer 2

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

div.justprofile {
   float: left;
   margin-right: 5px;
}

Answer 3

您需要在样式中（或在类中）添加包含图像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;
}

Answer 4

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

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

或者，如果您想使用CSS的float属性，请不要忘记关闭div：

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