CSS:图像正在对角线

时间:2015-02-17 18:56:03

标签: php html css

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

example of erroneous HTML rendering

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

$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"];
    }
}

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

1 个答案:

答案 0 :(得分:2)

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

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