CSS HTML浮动问题与div的 [英] CSS HTML Floating issue with div's

问题描述

我遇到了一些HTML / CSS的问题。我想浮动一个数字div div。但是最后一行并不浮动我想要它。这是一个很难解释，所以我把我的代码放在JSFiddle：

I'm running into some issues with HTML / CSS. I want to float a number off divs after each other. But the last div in line doesn't float how I want it. It's a litte difficult to explain so I placed my code on JSFiddle:

基本上，我的HTML看起来像这样：

In basic, my HTML looks like this:

<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/

Full example including CSS: http://jsfiddle.net/6r46B/

下面是一个带有这些div的图片，以及我如何让它们对齐：

Below an image with these div's and how I want them to align:

这里的问题是div .product-offer 浮在div .product-spec 的右边。但我想要一路上来。我该如何做？

The issue here is that the div .product-offer is floating right of the div .product-spec. But I want it all the way up. How would I do that?

PS：这部分将用于响应式设计。这将是广泛的例子。

PS: This part will be used in a responsive design. This will be the wide example.

推荐答案

按照浮动顺序，使产品优先顺序中的第一个元素优先。

Make product-offer the first element in the order of your DIVs to take precedence in the float-order.

这篇关于CSS HTML浮动问题与div的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！