用CSS分隔两个div

Question

用CSS分隔两个div

wro*_*ame 5 html css web

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

编辑:在我实际尝试之前一点接受答案.哎呦.

JSFiddles:

两个故事的故事

现在分开了,但是现在第二个就在第二行？

Answer 1

小智 6

如果能解决您的问题,请尝试这样做.

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

Run Code Online (Sandbox Code Playgroud)

Answer 2

Dec*_*ler 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 < 3 盒模型功能，该功能的定义很奇怪，定义尺寸（宽度/高度）不会减去边距和/或填充和/或边框宽度。
我相信CSS 3的盒模型将在这里提供更灵活的选择。但是，不可否认，我还不确定这些新功能的跨浏览器支持。

归档时间：	14 年，1 月前
查看次数：	34505 次
最近记录：	14 年，1 月前