Question

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

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

位置：绝对; 底部：0;

但如果您现在看一下该页面，它会将所有产品信息重叠在一起，我会尝试保持页面不变，因为我可以看到它。也包括下面的代码..

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;
 }

Answer 2

将position:absolute指定给任何元素时，它相对于具有属性position:relative的最近父元素定位。

如果不存在此类元素，则默认为body。

所以，只需将position:relative提供给.span3或#product。

虽然，你应该替换

<div id="product">

与

<div class="product">

只需使用：

.product {
    position: relative;
}

因为ids在整个页面中都是唯一的，并且没有2个元素应该具有相同的id，而相同的class可以应用于多个元素。

Answer 3

位置相对#product，span.3是一个容器

div信息重叠。应该是其容器的底部

3 个答案: