我一直在和这个问题搏斗一个小时,我根本没有任何进展,所以我在这里。
我面临的问题是我有一个不会留在另一个内部的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&path=74&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&path=74&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
内以及如何修复它?
答案 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&path=74_61&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&path=74_61&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&path=74_61&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&path=74_61&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>