CSS浮动和标记顺序 - 我可以吃蛋糕吗？

Question

我正在创建一个响应式电子商务网站，我正在设计一个模式对话框，用于向篮子中添加内容。我希望我的标记按此顺序排列：

<div class="modal">
    <div class="item"><!-- Product info --></div>
    <div class="quantity-discounts"><!-- Details of quantity discounts --></div>
    <div class="add-to-basket">
        <select name="quantity">
            <option value="1">1</option>
            <option value="2">2</option>
            <!-- ...and so on -->
        </select>
        <a href="#" class="button">Add to basket</a>
    </div>
</div>

在大屏幕上，我希望.item和.quantity-discounts div位于左侧，然后.add-to-basket部分浮动到右侧。

我想保持div的顺序，因为在小屏幕上它们不会并排浮动，它们将按照它们出现在标记中的顺序堆叠，这正是我想要的。

问题

由于原因，我不完全理解.add-to-basket div向右浮动但仅在.item div之后，因此留下了.item div高于它的间隙。让它呈现我想要的唯一方法是按照div的顺序放置.add-to-basket div第二，但是当它们在小屏幕上堆叠时，数量折扣将显示在添加到购物篮按钮下面我想要的是什么。

我做了一个剥离版本作为jsfiddle http://jsfiddle.net/2g9TA/1/

CSS

CSS明智的我将.item和.quantity-discounts浮动到左边，并将宽度设置为66％，右边距为2％。我然后向右浮动.add-to-basket并将其宽度设置为30％。

我尝试了什么

我尝试在.add-to-basket添加一个负余量，但因为无论我是以百分比还是以像素为单位设置它，该网站都具有响应性和流动性，此边距会改变其他所有内容。

我现在没有想法了。

Answer 1

您应在position: relative;中添加.container并在position: absolute; right:0px;中添加#div3并删除float:right;。它将为您提供所需的东西。

DEMO