html - CSS float 和标记顺序 - 我可以鱼和熊掌兼得吗？

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 的顺序，因为在小屏幕上它们不会并排 float ，它们会按照它们在标记中出现的顺序堆叠，这正是我想要的。

问题

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

我已经做了一个精简版本作为 jsfiddle http://jsfiddle.net/2g9TA/1/

CSS

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

我尝试过的

我尝试向 .add-to-basket 添加负边距，但由于该网站响应灵敏且流畅，因此无论我将其设置为百分比还是像素，此边距都会相对于其他所有内容发生变化。

我现在没有主意了。

Answer 1

您应该在 .container 中添加 position:relative; 并添加 position:absolute; #div3 中的 right:0px; 并删除 float:right;。它会给你你需要的东西。

DEMO