问个css问题。

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



index.jpg
如图所示。实际上就商品列表了。最外层的这个蓝色div的宽度是960px.商品图片的宽度:155px;高度:205px;我想让左右两端的图片顶到边排列。请问css应该如何设置。附上目前我的代码:
html:

  2. <div id="main">

  4. <div id="index_goods">
  5. <img src="images/1.jpg" />
  6. </div>
  7. <div id="index_goods">
  8. <img src="images/1.jpg" />
  9. </div>
  10. <div id="index_goods">
  11. <img src="images/1.jpg" />
  12. </div>
  13. <div id="index_goods">
  14. <img src="images/1.jpg" />
  15. </div>
  16. <div id="index_goods">
  17. <img src="images/1.jpg" />
  18. </div>

  20. </div>
复制代码
css:
  1. #main {width:960px; height:205px; border:#0099CC solid 1px; margin:0 auto;}
  2. #index_goods{float:left; width:20%;}
复制代码

回答：
#index_goods{float:left; width:212px;}
红色部分用像素 具体多少你慢慢试！

谢谢斑竹。好像斑竹。我之前也试过。width:192px;这样确实是在一行的。但是还是如图所示。我想将左右两边的图片是靠蓝色边框的。最外层边框是960px;图片的宽度155px. 我的css 太烂。实在调节不好。还是寻找帮助。

图片设置MARGIN-LEFT:0; MARGIN-RIGHT:?PX(?的数值自己测试哦)

#main {width:960px; height:205px; border:#0099CC solid 1px; margin:0 auto; overflow：hidden；}
#index_goods{float:left; width:192px; margin-right:?px}



多谢楼上的朋友在线下帮我解决了。再次致敬！