CSS：图像正在对角线

Question

当我尝试在PHP文件中使用html显示图像时，我遇到了这个奇怪的问题。目前我正在使用phpExcel从电子表格中提取数据，例如产品名称，sku，尺寸，数量等，然后放置图像。目标是显示产品名称，下面的图像，然后显示图像右侧的所有大小和数量信息，但我最终得到这样的结果：

我正在使用的代码就是这个循环：

$VendorSkus = array();
for ($x = 13; $x <= $highestRow; $x++) {
    if ($sheetData[$x]["E"] != null) {
        if (!in_array($sheetData[$x]["J"], $VendorSkus)) {
            echo $sheetData[$x]["E"] . " 
            <p><img src='/images/" . $sheetData[$x]["J"] . ".jpg' style='float:left'; height='262' width='262'></p>
            <p>" . $sheetData[$x]["J"] . "</p>";
        }

    echo "
    Size: " . $sheetData[$x]["M"];
    echo "Qty: " . $sheetData[$x]["N"] . "<br/>
    ";
    echo "<p><!-- pagebreak --></p> 
    </body>
    </html>";
        $VendorSkus[] = $sheetData[$x]["J"];
    }
}

如果我可以让图像在最后一个尺寸下相互对齐，这将是完美的。为什么会这样？我也许是空间问题？

Answer 1

这是css float属性的问题。您需要使用clearfix。示例教程：http://www.cssreset.com/understanding-clearing-floats-css-tutorial/

快速解决方案是不要将p标签与float一起使用，而是使用div标签。这会把一切都放在彼此之下。 （将所有<p>替换为<div>）