2

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

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

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

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

问题

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

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

CSS

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

我试过的

我尝试添加一个负边距，.add-to-basket但因为该站点是响应式和流动的，所以无论我以百分比还是像素设置它，这个边距都会相对于其他所有内容发生变化。

我现在没有主意了。

4

1 回答 1

3

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

演示

于 2012-12-13T12:01:23.147 回答