Question

假设我有两个div A和B，它们目前并排排列。如何让A与B分开50px，同时仍然让A占据剩余空间的70％而B占剩余的30％？

编辑：在我实际尝试之前一点接受答案。糟糕。

JSFiddles：

Now separated，但现在第二行是第二行？

Answer 1

如果它解决了你的问题，请试试这个。

<html>
<head>
    <style type="text/css">
        #Content
        {
            border: 3px solid blue;
            position: relative;
            height: 300px;
        }

        #divA
        {
            border: 3px solid red;
            position: absolute;
            margin-right: 25px;
            left: 5px;
            top: 5px;
            bottom: 5px;
            right: 70%;
        }

        #divB
        {
            border: 3px solid green;
            position: absolute;
            right: 5px;
            top: 5px;
            bottom: 5px;
            left: 30%;
            margin-left: 25px;
        }
    </style>
</head>
<body>
    <div id="Content">
        <div id="divA">
        </div>
        <div id="divB">
        </div>
    </div>
</body>
</html>

Answer 2

只需设置div B的margin-left或padding-left

Answer 3

我相信您选择的答案不起作用：

http://jsfiddle.net/cNsXh/

修改
对不起，上面的例子一开始并不正确。现在是。
的 /修改

如您所见，div #b将移至div #a下，因为margin-left（或padding-left）将添加到30%。而且因为我们在这里将百分比与像素值混合在一起，我们将无法定义能够保证始终合计100％的值。

您需要使用div #b的包装，其宽度为30%，而不是为div #b定义宽度，而是定义margin-left。因为div是一个块元素，它将自动填充包装器div中的剩余空间：

http://jsfiddle.net/k7LRz/

这样你就可以绕过CSS＆lt; 3个盒子模型特征定义奇怪，定义尺寸（宽度/高度）不会减去边距和/或填充和/或边框宽度。
我相信CSS 3的盒子模型将在这里提供更灵活的选择。但是，诚然，我还不确定这些新功能的跨浏览器支持。

Answer 4

@wrongusername;我知道你接受了这个答案，但你也可以检查这个解决方案，你不需要额外提供mark-up＆amp;如果你给你的div padding，它不会影响结构。

检查此示例：http://jsfiddle.net/sandeep/k7LRz/3/

Answer 5

http://jsfiddle.net/efortis/HJDWM/

#divA{ 
    width: 69%;  
}
#divB{ 
    width: 29%; 
    margin-left: 2%;
}

用CSS分隔两个div

5 个答案: