php - 如何对齐动态生成的 div 或段落

Question

我想显示一个产品页面，其中每个元素都相互对齐。这些产品是使用 PHP 代码动态生成的。问题是，当一个产品的名称比另一个产品的名称长时，它们不会水平对齐。

为了进一步了解我的问题，这里是截图:

您可以看到产品价格彼此不一致，因为它们受产品名称长度的影响。

这是我的 PHP 和 HTML 代码:

<!--PHP CODE FOR EXTRACTING DATA FROM TABLE-->
<div class="span_container">
                        <div class="col-md-4 bottom-cd simpleCart_shelfItem" style="display: inline-block;">
                            <div class="product-at ">
                                <a href="single.php"><img class="img-responsive" style="width:300px; height:auto;" src="/EDGE/storeadmin/product_images/<?php echo $row['i_image']; ?>" alt="">
                                <div class="pro-grid">
                                            <span class="buy-in">View Details</span>
                                </div>
                            </a>
                            </div>
                            <p class="tun"><?php echo $row['i_name'];?></p>
                            <a href="checkout.php" class="item_add"><p class="number item_price"><i> </i>₱<?php echo $row['i_price']; ?></p></a>
                        </div>
                    </div>

这是我段落的 CSS 代码 (tun):

    p.tun {
    font-size:1em;
    color: #949494;
    text-align: center;
    line-height: 1.3em;
    padding: 1em 0;
}

Answer 1

这很简单。为包含的 .simpleCart 类设置 position:relative;，以及像 height:300px 这样的高度 - 将 300 替换为您需要的盒子高度使每个包含框具有相同的高度。

然后使用 position:absolute; 根据我们已知的高度定位 .simpleCart 中的元素。

我们知道并且可以推断:

• 图像的高度:因此我们使用，例如:position:absolute;top:5%; - 根据您的需要更改 5%。
• 产品价格的高度，无论 .simpleCart 框多高，这些价格都将位于底部。所以我们使用 position:absolute;bottom:5% - 再次根据您的需要更改 5%。现在每个产品的价格都处于同一水平。前提是每个 .simpleCart 框的高度相同。
• 最后，我们将带有 .tun 类的段落文本放在 position:absolute;top:150px; 之间 - 您可以根据需要更改 150它介于图像和产品定价之间。