php - CSS:图像是对 Angular 线的

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/

快速解决方案是不使用带 float 的 p 标签，而是使用 div 标签。这将使一切都在彼此之下。 (将所有 <p> 替换为 <div> )