[已解决]产品列表 显示问题

2016-07-07 16:13 来源：www.chinab4c.com 作者：ecshop专家



2.jpg

问题如图.商品名一旦需要完全显示时候就乱了,实际传商品,每个商品名肯定不一样.
经过测试如果每个商品单位的高度一致的话是不会出现这样的问题的.
1副本.jpg

当然每个box都设置了float:left;属性.
这个问题不知道大家遇到过没.

以下是解决方法:
(以下演示代码图片存在自己空间的,不保证长期有效.)

  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  6. <title>无标题文档</title>
  7. <style>
  8. * { padding:0px; margin:0px; font-family:Arial, Helvetica, sans-serif;}
  9. #container { width:600px; margin:auto; background:#000000; padding:10px; margin-bottom:50px;}
  10. #container ul { letter-spacing:-.25em;}
  11. #container li { text-align:center; width:148px; font-size:12px; color:#FFFFFF; border:1px solid #FF0000; padding-top:10px; padding-bottom:5px; margin-bottom:10px; list-style:none; display:inline-block;#display:inline;#zoom:1;letter-spacing:normal;vertical-align:top;}
  12. </style>
  13. </head>
  14. <body>
  15. <div id="container">
  16. <ul>
  17. <li>
  18. <img src="http://www.hnqikan.com/music/pro.jpg" /><br />
  19. 这里是产品名称<br />
  20. Price:888RMB
  21. </li>
  22. <li>
  23. <img src="http://www.hnqikan.com/music/pro.jpg" /><br />
  24. 这里是产品名称<br />
  25. Price:888RMB
  26. </li>
  27. <li>
  28. <img src="http://www.hnqikan.com/music/pro.jpg" /><br />
  29. 这里是产品名称<br />
  30. Price:888RMB
  31. </li>
  32. <li>
  33. <img src="http://www.hnqikan.com/music/pro.jpg" /><br />
  34. 这里是产品名称<br />
  35. Price:888RMB
  36. </li>
  37. <li>
  38. <img src="http://www.hnqikan.com/music/pro.jpg" /><br />
  39. 这里是产品名称<br />
  40. 这里是产品名称<br />
  41. 这里是产品名称<br />
  42. Price:888RMB
  43. </li>
  44. <li>
  45. <img src="http://www.hnqikan.com/music/pro.jpg" /><br />
  46. 这里是产品名称<br />
  47. Price:888RMB
  48. </li>
  49. <li>
  50. <img src="http://www.hnqikan.com/music/pro.jpg" /><br />
  51. 这里是产品名称<br />
  52. Price:888RMB
  53. </li>
  54. <li>
  55. <img src="http://www.hnqikan.com/music/pro.jpg" /><br />
  56. 这里是产品名称<br />
  57. Price:888RMB
  58. </li>
  59. <li>
  60. <img src="http://www.hnqikan.com/music/pro.jpg" /><br />
  61. 这里是产品名称<br />
  62. Price:888RMB
  63. </li>
  64. <li>
  65. <img src="http://www.hnqikan.com/music/pro.jpg" /><br />
  66. 这里是产品名称<br />
  67. Price:888RMB
  68. </li>
  69. <li>
  70. <img src="http://www.hnqikan.com/music/pro.jpg" /><br />
  71. 这里是产品名称<br />
  72. Price:888RMB
  73. </li>
  74. <li>
  75. <img src="http://www.hnqikan.com/music/pro.jpg" /><br />
  76. 这里是产品名称<br />
  77. Price:888RMB
  78. </li>
  79. </ul>
  80. </div>
  81. </body>
  82. </html>
复制代码
pro.jpg

回答：
修改下商品名称长度就可以了，在商店设置 显示设置 哪里可以现在商品名称长度

有些模板是重写过的，那么不会有此问题。
或者更换模板。由于默认模板需要凸显ec的功能和兼容各大浏览器，这个地方不太好更改。

4# 晓天

我说的其实不是官方模板有这个问题,程序开始循环是针对一个块状整体循环的,每个块状元素设置了向左浮动属性,循环个数不确定,每个块状整体高度不一致,如果每一行不清楚浮动似乎都会有这样的问题的.今天让程序员加入了段代码,就是自动判断每行显示个数,如果每行显示4个,那在4个结束时候插入一段清楚浮动代码,这样就可以很好的解决了.

也许是我对div+css理解不够,可能是有办法解决的吧.学这个时间不长,还真没什么好办法解决呢.我下了好几个模板都有这样问题的,所以我怀疑是不是就应该是这样的呢....纠结啊...

5# 笨小康

谢谢管理的耐心回答哦...如果有更好的方法解决,还是期待的!