Question

代码（HTML / CSS）： http://jsfiddle.net/2tXZ6/6/

我无法解决我的代码中导致产品单元设计出现以下异常的问题。

Product title，product description，product images （1 2 3 4个链接）应该位于小图片的左侧，而不是在它之下。
Product price和status该商品是否有库存应该位于product title，product description和{{1}的左侧}}。相反，它不可见。
当您将鼠标悬停在链接1,2,3 或 4 上时，由于某种原因弹出窗口会拉伸整个product images div，您可以'看到整个图像。

任何人都知道这里可能出现什么问题？

Answer 1

相当多的事情。

<强> 1。 Product title，product description，product images（1 2 3 4个链接）

让我们先处理您的产品图片。你说你希望产品标题等出现在它的左边，这意味着产品图像需要浮动到右边而不是左边。

 #product_cell img {  float:right;  border: 1px solid #80889D; margin-right: 8px; }

浮动这两件事会产生问题，我不确定是否有必要让我们摆脱它：

 #product_cell .product_info{ }

<强> 2。 Product price和status

这些项目未显示，因为.thumbnail span和.thumbnail:hover span正在应用于它们（除非悬停时隐藏它们）。这是来自糟糕的标记。

添加结束</ul>代码
第2-4项缺少</a>结束锚标记

但它仍然没有像你想要的那样位于最左边的位置。你需要移动div的HTML排序：

<div id="product_cell">    

  <div class="tag">
      <span class="price">$500.00</span><br />
      <span class="status sold">sold</span>
  </div>

  <img src="http://placekitten.com/100/100">
  <!-- ... -->

你可以为它添加一些高度，使它看起来更好一点：

 #product_cell .tag { float: left; clear:right;  height:50px; }

第3。链接1,2,3,4

我不确定你在这里想做什么。尝试使用z-index

http://jsfiddle.net/WByr9/

Answer 2

从div.product_info内的元素中删除浮点数。将div本身浮动就足够了。使用float：right on image，info div和tag div。
在第2,3和4号链接中遗漏了关闭</a>，错过了关闭</ul>
无法在FF6中复制，可能由以前的点或更多信息修复。

http://jsfiddle.net/2tXZ6/9/

Answer 3

重新组织布局和css：http://jsfiddle.net/2tXZ6/12/

无法弄清楚是什么让div内的内容滑下来

3 个答案: