DIV不会留在另一个DIV内

时间:2012-02-17 23:46:49

标签: html css smarty opencart

我一直在和这个问题搏斗一个小时,我根本没有任何进展,所以我在这里。

我面临的问题是我有一个不会留在另一个内部的div。

图片说明了我拥有的和我想要的东西: http://www.upload.ee/image/2086206/whatiwant.jpg

直播版:http://haavistu.eu/shop/index.php?route=product/category&path=74_61

到目前为止我做了什么: 我将价格生成代码和所有按钮放在div分类stuffholder内。然后我将div stuffholder浮动到右边。

我认为我已经完成但是从图片中可以看到我所拥有的。

所有相关代码:

<div class="product-list">
    <?php foreach ($products as $product) { ?>
    <div>

    <div class="image">
        <?php if ($product['thumb']) { ?>
            <a href="<?php echo $product['href']; ?>"><img src="<?php echo $product['thumb']; ?>" title="<?php echo $product['name']; ?>" alt="<?php echo $product['name']; ?>" /></a>
        <?php } ?>
        <?php if ($product['rating']) { ?>
            <img src="catalog/view/theme/default/image/stars-<?php echo $product['rating']; ?>.png" alt="<?php echo $product['reviews']; ?>" />
        <?php } ?>
    </div>

    <div class="stuffholder">
        <?php if ($product['price']) { ?>
                <div class="price">
                    <?php if (!$product['special']) { ?>
                    <?php echo $product['price']; ?>
                    <?php } else { ?>
                    <span class="price-old"><?php echo $product['price']; ?></span> <span class="price-new"><?php echo $product['special']; ?></span>
                    <?php } ?>
                </div>
            <?php } ?>
        <div class="cart">
            <a onclick="addToCart('<?php echo $product['product_id']; ?>');" class="button"><span><?php echo $button_cart; ?></span></a>
        </div>
        <div class="wishlist">
            <a onclick="addToWishList('<?php echo $product['product_id']; ?>');"><?php echo $button_wishlist; ?></a>
        </div>
        <div class="compare">
            <a onclick="addToCompare('<?php echo $product['product_id']; ?>');"><?php echo $button_compare; ?></a>
        </div>
    </div>

      <div class="name"><a href="<?php echo $product['href']; ?>"><?php echo $product['name']; ?></a></div>
      <div class="description"><?php echo $product['description']; ?></div>
    </div>
    <?php } ?>

  </div>

抱歉可怕的意图。图像,名称和描述部分似乎工作正常。

继承人CSS

.product-list > div {
    overflow: auto;
}
.product-list .right {
    float: right;
}
.product-list .image {
    float: left;
}
.product-list .image a {
    display: block;
}
.product-list .image img {
    display: block;
}
.product-list .stuffholder {
    display: block;
    float: right;
}
.product-list .price {
}
.product-list .price-old {
    display: block;
}
.product-list .wishlist a {
    display: block;
}
.product-list .compare a {
    display: block;
}

删除了完全无关的东西。

当我看到所有创建的源代码时,我看到了:

<div>
    <div class="image"><a href="xxx/shop/index.php?route=product/product&amp;path=74&amp;product_id=50"><img src="xxx/shop/image/cache/data/prosessorit/Core-i5-2500K-and-Core-i7-2600K-Review-614x614-80x80.jpg" title="Intel Core i5-2500K 3,3Ghz Prosessori - LGA1155" alt="Intel Core i5-2500K 3,3Ghz Prosessori - LGA1155" /></a>
                            <img src="catalog/view/theme/default/image/stars-5.png" alt="Perustuu 1 arvioon." />
            </div>
  <div class="name"><a href="xxx/shop/index.php?route=product/product&amp;path=74&amp;product_id=50">Intel Core i5-2500K 3,3Ghz Prosessori - LGA1155</a></div>
  <div class="description">
    Intel’s most popular family member is more adaptable than ever and unlocked. The 2nd generation..</div>

    <div class="stuffholder">
        <div class="price">198,00€</div>
        <div class="cart">
            <a onclick="addToCart('50');" class="button"><span>Lisää koriin</span></a>
        </div>
        <div class="wishlist">

            <a onclick="addToWishList('50');">Lisää toivelistaan</a>
        </div>
        <div class="compare">
            <a onclick="addToCompare('50');">Lisää vertailuun</a>
        </div>
    </div>

</div>

根据源代码,它应该可以很好地工作。任何人都可以告诉我div price何时没有留在div stuffholder内以及如何修复它?

4 个答案:

答案 0 :(得分:0)

在父

中使用overflow: hidden;

答案 1 :(得分:0)

查看您的实例示例的源代码,它不会反映您的问题所指示的内容:

<div>
<div class="right">
    <div class="cart">
        <a onclick="addToCart('50');" class="button"><span>Lisää koriin</span></a>
    </div>
    <div class="wishlist">
        <a onclick="addToWishList('50');">Lisää toivelistaan</a>
    </div>
    <div class="compare">
        <a onclick="addToCompare('50');">Lisää vertailuun</a>
    </div>
</div>
<div class="left">
    <div class="image">
        <a href="http://haavistu.eu/shop/index.php?route=product/product&amp;path=74_61&amp;product_id=50"><img src="http://haavistu.eu/shop/image/cache/data/prosessorit/Core-i5-2500K-and-Core-i7-2600K-Review-614x614-80x80.jpg" title="Intel Core i5-2500K 3,3Ghz Prosessori - LGA1155" alt="Intel Core i5-2500K 3,3Ghz Prosessori - LGA1155"></a>
        <img src="catalog/view/theme/default/image/stars-5.png" alt="Perustuu 1 arvioon.">
    </div>
    <div class="price">198,00€</div>
    <div class="name">
        <a href="http://haavistu.eu/shop/index.php?route=product/product&amp;path=74_61&amp;product_id=50">Intel Core i5-2500K 3,3Ghz Prosessori - LGA1155</a>
    </div>
    <div class="description">
        Intel’s most popular family member is more adaptable than ever and unlocked. The 2nd generation..
    </div>
</div>

价格在 div中,请参阅?

答案 2 :(得分:0)

使用现有功能执行此操作的最简单方法是向.product-list .price选择器添加一些规则。

.product-list .price {
  color: #333333;
  font-size: 16px;
  font-weight: bold;
  position: relative; /* this is new */
  right: -85px;       /* this is new */
}

但是,如果价格在结账按钮之前的文件中而不是现在的价格可能会更好。

答案 3 :(得分:0)

page you linked to的布局与您发布的布局不同。有两个DIV。一个div.left和一个div.right。你的价格是标有“左”的价格......这就是为什么它向左,而不是向右。只需移动它就可以解决问题。

该页面的代码看起来像这样。 (修好之后。)

<div class="right">
  <div class="price">
    1 033,00€
  </div>

  <div class="cart">
    <a class="button" onclick="addToCart('51');"><span>Lisää koriin</span></a>
  </div>

  <div class="wishlist">
    <a onclick="addToWishList('51');">Lisää toivelistaan</a>
  </div>

  <div class="compare">
    <a onclick="addToCompare('51');">Lisää vertailuun</a>
  </div>
</div>

<div class="left">
  <div class="image">
    <a href=
    "http://haavistu.eu/shop/index.php?route=product/product&amp;path=74_61&amp;product_id=51">
    <img alt="Intel Core i7-3960X 3,3GHz Prosessori - LGA2011" title=
    "Intel Core i7-3960X 3,3GHz Prosessori - LGA2011" src=
    "http://haavistu.eu/shop/image/cache/data/prosessorit/Intel%20Core%20i7-3960X%203,3GHz%20-%20LGA2011-80x80.jpg"></a>
  </div>

  <div class="name">
    <a href=
    "http://haavistu.eu/shop/index.php?route=product/product&amp;path=74_61&amp;product_id=51">
    Intel Core i7-3960X 3,3GHz Prosessori - LGA2011</a>
  </div>

  <div class="description">
    The 2nd generation Intel Core i7-3960X Processor Extreme Edition is super-smart,
    ultra-threaded, ..
  </div>
</div>