html - div 的 CSS HTML float 问题

Question

我遇到了 HTML/CSS 的一些问题。我想在 div 之间 float 一个数字。但是最后一个 div 并没有按照我想要的方式 float 。这有点难以解释，所以我将我的代码放在 JSFiddle 上:

基本上，我的 HTML 如下所示:

<ul>
  <li>
    <div class="product-image"></div>
    <div class="product-title"></div>
    <div class="product-description"></div>
    <div class="product-spec"></div>
    <div class="product-offer"></div>
  </li>
</ul>

包含 CSS 的完整示例:http://jsfiddle.net/6r46B/

在带有这些 div 的图像下方以及我希望它们如何对齐:

这里的问题是 div .product-offer float 在 div .product-spec 的右侧。但我想要它一直向上。我该怎么做？

PS:这部分会用在响应式设计中。这将是一个广泛的例子。

Answer 1

将 product-offer 作为 DIV 顺序中的第一个元素，以在 float 顺序中优先。