Question

我正在尝试在magento上为特定类别自定义list.phtml页面。

我拿走了产品图片以及产品说明，现在我想将产品名称推到图片所在的左侧。我尝试在我的css文件中使用margin-left的负值来处理文本，但似乎有些东西漂浮在文本前面（即文本在白色空间后面滑动。）任何想法？另一种可能的方法呢？

谢谢！

在：

http://i.stack.imgur.com/mtlZX.jpg

后：

http://i.stack.imgur.com/OQpCW.jpg

我也尝试在styles.css中修改这些值：

.product-view .product-shop {
   width: 50%;
   float: left;
}

.product-img-box {
   width: 50%;
   float: right;
}

Answer 1

尝试在将图像移除到css文件后添加此内容。

.products-list .product-shop {
  float: right;
  padding-left: 20px;
  width: 100%;
}

这会让产品div占据整个宽度。但你应该首先删除图像，

要删除图像，请转到Magento安装（1.9.1），然后转到app/design/frontend/YOURMAGENTOTHEME/default/template/catalog/product/list.phtml

默认情况下，YOURMAGENTOTHEME在1.9及更新版本中为rwd

现在您需要删除第50行和第63行（1.9.1）之间的以下内容

  <?php // Product Image ?>
            <a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" class="product-image">
                <?php /* Based on the native RWD styling, product images are displayed at a max of ~400px wide when viewed on a
                        one column page layout with four product columns from a 1280px viewport. For bandwidth reasons,
                        we are going to serve a 300px image, as it will look fine at 400px and most of the times, the image
                        will be displayed at a smaller size (eg, if two column are being used or viewport is smaller than 1280px).
                        This $_imgSize value could even be decreased further, based on the page layout
                        (one column, two column, three column) and number of product columns. */ ?>
                <?php $_imgSize = 300; ?>
                <img id="product-collection-image-<?php echo $_product->getId(); ?>"
                     src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->keepFrame(false)->resize($_imgSize); ?>"
                     alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" />
            </a>
            <?php // Product description ?>

这是更正确的方法，或者您可以将其添加到CSS中以隐藏图像：

.product-image > img{
display:none;    
}

但这是不正确的。

编辑Magento 1.9 CSS以自定义类别布局

1 个答案: