[英]Issues with Inline-Block making Images Smaller?
我正在嘗試使此頁面上的這三張圖像彼此依次加載。 當我在CSS中將其設置為“ Inline-Block”時,它可以工作,但是圖像變得很小。
https://www.palmersdeliandmarket.com/holiday/
這是我的CSS:
.categories ul li a.current { font-weight: bold; }
#shopp .category { position: relative; display: inline-block;}
#shopp .views { display: inline; position: absolute; right: 0; top: 0; }
#shopp .views button { border: 1px solid transparent; background: none; cursor: pointer; padding: 2px; margin-bottom: -3px; }
#shopp .views button.hover { background-color: #ebebeb; border: 1px solid #777; }
#shopp .views li { display: inline; }
#shopp .orderby { float: right; }
和我的HTML:
<?php if(shopp('category','hasproducts','load=coverimages')): ?>
<div class="alignright"><?php shopp('category','pagination','show=10'); ?></div>
<ul class="products">
<li class="row"><ul>
<?php while(shopp('category','products')): ?>
<?php if(shopp('category','row')): ?></ul></li><li class="row"><ul><?php endif; ?>
<li class="product">
<div class="frame">
<a href="<?php shopp('product','url'); ?>"><?php shopp('product','coverimage','setting=gallery-previews'); ?></a>
<div class="details">
<h4 class="name"><a href="<?php shopp('product','url'); ?>"><?php shopp('product','name'); ?></a></h4>
<p class="price"><?php shopp('product','saleprice','starting=from'); ?> </p>
<?php if (shopp('product','has-savings')): ?>
<p class="savings">Save <?php shopp('product','savings','show=percent'); ?></p>
<?php endif; ?>
<div class="listview">
<p><?php shopp('product','summary'); ?></p>
<form action="<?php shopp('cart','url'); ?>" method="post" class="shopp product">
<?php shopp('product','addtocart'); ?>
</form>
</div>
</div>
</div>
</li>
<?php endwhile; ?>
</ul></li>
</ul>
<div class="alignright"><?php shopp('category','pagination','show=10'); ?></div>
</div>
<?php else: ?>
<?php if (!shopp('catalog','is-landing')): ?>
<?php shopp('catalog','breadcrumb'); ?>
<h3><?php shopp('category','name'); ?></h3>
<p>No products were found.</p>
<?php endif; ?>
<?php endif; ?>
謝謝,感謝您的幫助。
display: inline-block
+ width: auto
給出的寬度僅足以容納內容。 添加width: 100%
。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.