css - 用CSS分隔两个div

标签 css html web

假设我有两个 div A 和 B,它们目前并排对齐。如何让 A 与 B 相隔 50px,同时让 A 占据剩余空间的 70%,B 占据剩余空间的 30%?

编辑:在我实际尝试之前接受了答案。糟糕。

JSFiddles:

A Tale of Two Divs

Now separated , 但现在第二个在第二行?

最佳答案

如果它能解决您的问题,请尝试一下。

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

关于css - 用CSS分隔两个div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7523778/

相关文章:

jquery 下拉框字体和对齐方式

css - 为什么float right出现在float left的下方?

javascript - 使用 JavaScript/AJAX/jQuery 逐行读取同一服务器上的文件?

javascript - 如何在 IFrame 加载时执行 javascript 代码

html - 使用 CSS 制作静态/粘性菜单栏

javascript - 使用网络 worker 进行多个并发的繁重计算?

php - 为网站存储用户音乐播放列表

html - 围绕多个图 block 收缩包裹 div

html - Materialise 卡片中的垂直对齐卡片内容

javascript - 在点击事件上克隆整个 div 标签