Question

我在循环（PHP）中有一个循环，如下所示：

while(mysql...) {
 echo $row1->name.'<img src="info.png" />';
 while(another_mysql...) {
  echo $row2->name.'<img src="image.png" />';
 }
}

现在这会产生这样的结果：

head_1 [info.png]
value_a1 [image.png]
value_a2 [image.png]
value_a3 [image.png]
head_2 [info.png]
value_b1 [image.png]
value_b2 [image.png]

如您所见，图像不是直线，因为值可能不同，导致图像被进一步向右推。

使用str_pad();转换值时，它确实有效，但不稳定并且有点错误。我不知道如何将图像放在div所在的div旁边，因为循环不会喜欢它。

我能做些什么让它输出如下：

head1      [info.png]
value_a1   [image.png]
value_a2   [image.png]
value_a3   [image.png]
head2      [info.png]
value_b1   [image.png]
value_b2   [image.png]

Answer 1

使用以下代码使其正确对齐：

echo "<div style='width:310px'>";
while(mysql...) {
 echo '<div style="width:50px;float:left">'.$row1->name.'</div><div style="width:250px;float:right"><img src="info.png" /></div>';
 while(another_mysql...) {
  echo '<div style="width:50px;float:left">'.$row2->name.'</div><div style="width:250px;float:right"><img src="image.png" /></div>';
 }
}
echo "</div>";

在while循环中使用它。希望这对你有所帮助。

Answer 2

有很多方法可以做到这一点。一个直接的解决方案是使用表格。类似的东西：

echo '<table>'
while(mysql...) {
 echo '<tr><td>'.$row1->name.'</td><td><img src="info.png" /></td></tr>';
 while(another_mysql...) {
  echo '<tr><td>'.$row2->name.'</td><td><img src="image.png" /></td></tr>';
 }
}
echo '</table>'

这使浏览器可以确定正确的宽度。其他方式使用div。它们可以被赋予固定宽度 - 模拟表格 - 或者您可以使用position: absolute; right: 0;（加上一些CSS）对齐包含图像的右侧div，这将对齐所有图像。

Margin div通过嵌套while循环

2 个答案: