Question

我使用div和绝对位置在html页面上显示5个结果。我用过display：table-cell;并显示：flex;用于图像和文本的中心定位。

我有问题是因为某些原因在为每个结果创建一个父div后，给它一个边框，由于某种原因eben虽然我使用绝对位置，但结果之间似乎有一些统一的空间。我在正确的位置看到边框，但结果内容显示不合适。

见这里： https://www.dropbox.com/s/deeycdr32ejcftd/proferror.jpg?dl=0

有些东西正在扭曲结果。当我取出标有profile [1到6]的父容器时，它确实有效。

继承了回复HTML的PHP：

echo "<div id='results' style='position:absolute;left:0px;top:0px;'>"
(while loop)
   echo "<div id='profile".$profileid."' style='border-style: solid;position:absolute;left:0px;top:".$yy."px;width:320px;height:50px;'>";
   echo "<div id='pic".$profileid."' style='display:table-cell; vertical-align:middle; text-align:center;background-color: #434345;position:absolute;left:0px;top:".$yy."px;width:50px;height:50px;overflow: hidden;'>";
   echo "<a href='http://rafnet.co.uk/click/php/requests.php?from=".$username."&to=".$row["username"]."'><img style='max-height: 100%;' src='http://rafnet.co.uk/click/images/".$row["image"]."' /></a></div>";
   echo "<div style='color:#0d00ff;display:flex; align-items: center; justify-content: center;position:absolute;left:50px;top:".$yy."px;width:270px;height:30px;overflow: hidden;'>".$name."</div>";   
   echo "<div style='display:table-cell; vertical-align:middle; text-align:center;position:absolute;left:50px;top:".($yy+30)."px;width:270px;height:20px;overflow: hidden;'>".$info."</div></div>";

   $yy+=60;$profileid+=1;
(end of while loop)
echo "</div>"

Answer 1

echo "<div style='display:table-cell; vertical-align:middle; text-align:center;position:absolute;left:50px;top:".($yy+30)."px;width:270px;height:20px;overflow: hidden;'>".$info."</div></div>";

尝试删除此行末尾的第二个</div>

Answer 2

我成功解决了这个问题。我在一些工作后意识到，父div“profile”中的所有div都是相对于它的位置定位的。

所以我改变了那些div

top:".$yy."px;

到

top:0px;

参考css你说我是否应该使用style属性来定义东西？你是说我应该把css放在head部分并使用id或class分配它们？我只是使用了style属性，我没有参考它适用于

的元素

为什么我的div显示在错误的地方

2 个答案: