通过嵌套的while循环边距div答案

【问题标题】：Margin div through nested while loop通过嵌套的while循环边距div
【发布时间】：2013-04-24 12:42:59
【问题描述】：

我在这样的循环 (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]

【问题讨论】：

您必须首先知道名称的最大长度，以便在回显时将名称填充到该长度 + 3。这意味着，除非您知道最大宽度，否则必须先遍历所有名称，然后再回显。
@Mr.Alien 你在谈论编码标准和代码可读性，我完全同意这些原则，但 MrMadMan 想要一个格式化/样式化的输出。所以 MadMan 先生，使用 CSS，看看 Gaurav Vashishtha 的答案。
@JBRTRND 哦，我明白了，我会删除我的评论 :)

标签： php css loops html

【解决方案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 循环中使用它。希望这对您有所帮助。

【讨论】：

style="50px"。你忘记了选择器。

【解决方案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>'

这让浏览器负责确定正确的宽度。其他方式使用divs。它们可以被赋予固定的宽度——模拟一个表格——或者你可以使用position: absolute; right: 0;（加上更多的CSS）来对齐包含图像的右div，这将使所有图像右对齐。

【讨论】：