Magento Homepage HTML 布局问题与 Jquery Slider - 代码/图片内答案

【问题标题】：Magento Homepage HTML layout issue with Jquery Slider - Code/Pictures WithinMagento Homepage HTML 布局问题与 Jquery Slider - 代码/图片内
【发布时间】：2012-06-09 00:32:04
【问题描述】：

感谢您抽出宝贵时间阅读本文。描述问题的最简单方法是查看http://foscam-uk.com/index.php（请注意，这是运行正确的styles.css，而不是本文后面的theme316）

如您所见，特色产品和畅销书块已移至页面的最右侧，此时它们应该看起来像下面这张带有 jQuery 滑块的图像：http://i.imgur.com/cl9fc.jpg

我相信 style.css 中有一些东西可以在这里找到 http://foscam-uk.com/skin/frontend/default/mt_segina/css/styles.css，因为我必须从以前的样式 css 中复制部分内容，该样式来自这里 http://foscam-uk.com/skin/frontend/default/theme316/css/styles.css

jQuery 的代码也可以在这里找到：http://foscam-uk.com/widget（注意这是从原始的 theme316 css 文件运行的）。

我知道这篇文章有点长，非常感谢所有花时间看这篇文章的人。

问候

【问题讨论】：

标签： jquery html css magento layout

【解决方案1】：

我是否正确假设您的意思是块已移动到页面的最左侧？

我可以看到发生的事情是您在div.col-main 上有一个float:left，这导致它粘在左边。此外，您为此 div 680px 设置的宽度太小，无法容纳畅销商品和特色产品。尝试增加宽度以匹配其上方的 jQuery 滑块，并设置自动边距以使其水平居中。例如：

.col-main {
    width: 954px;
    padding: 0 0 1px;
    margin: 0 auto;
}

或者您可以将div.col-main 嵌套在div.wrapper 内，而无需添加自定义宽度。

【讨论】：

非常感谢，会试一试！
没问题，很高兴我能帮上忙 :)

【解决方案2】：

看起来 jQuery 和 Prototype 之间存在冲突。你是如何在你的网站中调用 jQuery 的？请参阅此博客了解更多信息： http://www.fontis.com.au/blog/magento/using-jquery-magento

或 http://css-tricks.com/using-jquery-in-magneto/

有很多关于在magento中使用jQuery的文章。

【讨论】：