行內塊製作圖像較小的問題？

我試圖讓這三個圖像在這個頁面上一個接一個地加載。當我將它設置爲css中的「內嵌塊」時，它可以工作，但圖像變得非常小。行內塊製作圖像較小的問題？

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

感謝，任何幫助表示讚賞。

來源

2013-11-20 alliefayden

在CSS中看不到任何內聯塊。 –

您的HTML存在問題。第一張和其他圖像位於不同的

標籤中，因此它們不能輕鬆對齊在同一行上。你爲什麼認爲它創建了不同的類別div？也許是因爲它試圖在HTML中爲你分類產品？ – deb0rian

@Fratyr是的，第一個圖像與其他兩個圖像不同，因此它只是默認開始一個新行。 – alliefayden

display: inline-block + width: auto給出的寬度僅足夠大以適合內容。添加width: 100%。

來源

2013-11-20 20:10:03 sam

行內塊製作圖像較小的問題？

回答

相關問題