html - div 信息重叠。应该在其容器的底部

Question

我创建了一个名为“category-product-info”的类，其中包含我网站上的每个产品信息(标题、价格、添加到购物车按钮)。每个产品都在自己的容器中，可以清楚地看到。 (id="产品")。

现在我已将以下代码放入 category-product-info 类中，以使所有内容都位于每个容器的底部:

position:absolute； 底部:0；

但是如果您现在查看该页面，它会将所有产品信息重叠在一起，我会在处理它时尽量保持页面原样，以便您可以看到。也包括下面的代码..

http://bit.ly/1hfvCvH

HTML

<div class="span3">
    <div id="product"> 
        <div class="product-select <?=$counter;?>">
            <!-- ENABLE FOR TRIANGLES ON PRODUCT IMAGES -->
            <!-- <div class='triangle-container'><div class='triangle'><p>NEW!</p></div></div> -->
            <?php if ($row_rsCatalogue['fileId']){ ?>
                <div class="product-image">
                    <a href="<?php echo HTTP_HOST.'Product/'.($catRoot?$catRoot:'').$row_rsCatalogue['pageName']; ?>">
                    <img style="<?=$img_ratio;?>" src="<?php echo HTTP_HOST.'upload/340w/'.$row_rsCatalogue['fileId'].'_'.$row_rsCatalogue['fileName']; ?>" alt="<?php echo (($row_rsCatalogue['metaKey'].' - '.$row_rsCatalogue['pageTitle'])); ?>" />
                </a>
                </div>
                <?php } ?>
            <div class="category-product-info">
                <div class="product-title"><a href="<?php echo HTTP_HOST.'Product/'.$catRoot.''.$row_rsCatalogue['pageName']; ?>"><?php echo ($row_rsCatalogue['pageTitle']); ?></a></div>
                <div class="price"><p><i>&nbsp;&nbsp;<br /> </i> &pound;<?php echo  number_format(($catalogue->output_row_price($user)),2); ?></p></div>
                <!--div class="price"><p><i>from<br />only</i> &pound;<?php echo  number_format(($catalogue->output_row_price($user))*($site->row['vatRate']/100+1),2); ?></p></div-->
                <a href="<?php echo HTTP_HOST.'Product/'.($catRoot?$catRoot:'').$row_rsCatalogue['pageName']; ?>">
                    <img src="<?=HTTP_HOST;?>img/addtocart.jpg" />
                </a>
            </div>
        </div>
    </div>
</div>

CSS

#products {
    width: auto;
    display: block;
}

#product-container {
    margin-bottom: 20px;
}

#product {
    text-align: center;
    border: 1px solid #eee;
    margin-bottom: 20px;
    padding: 10px;
    min-height: 350px;
}

#product:hover {
    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(top,  #ffffff 0%, #f8f8f8 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f8f8f8)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #ffffff 0%,#f8f8f8 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #ffffff 0%,#f8f8f8 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #ffffff 0%,#f8f8f8 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #ffffff 0%,#f8f8f8 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f8f8f8',GradientType=0 ); /* IE6-9 */
}

.price {
    font-weight: bold;
    font-size: 1.3em;
}

.category-product-info {
    bottom: 0;
    position: absolute;
}

Answer 1

希望它能帮助您在 category-product-info 类中将绝对位置更改为相对位置

  .category-product-info {
bottom: 0;
position: relative;
 }

并为 product-image 类提供一些相似的高度，以将完美的高度与所有 div 示例对齐，例如

 .product-image {
  height: 210px;
 }