Question

我遇到过棘手的问题，我需要在一行中放置两个div（左，右），右必须修复宽度，但左必须填充可用空间，换句话说：左 div必须有100％ - X像素，右 div应为X像素

重点：没有位置相对/绝对黑客。

有没有办法实现这个结果。我在很多方面尝试过，但没有运气。

标记

<html>
<head>
    <title></title>
</head>
<body>
    <style>
        .container {
            /* container don't matter */
            width: 500px;
            background-color: bisque;
            height: 50px;
        }

            .container .left {
               /* display: inline-block; */ 
                margin-right: 50px;
                background-color: burlywood;
                height: 50px;
            }

            .container .right {
                float: right;
                background-color: chartreuse;
                width: 50px;
                height: 50px;
            }
    </style>
    <div class="container">
        <div class="left">
            fill free space (100% - right)
        </div>
        <div class="right">
            fixed width
        </div>
    </div>
</body>
</html>

Answer 1

你可以这样做：

JSFiddle - DEMO

<强> CSS：

.container {
    width: 500px;
    background-color: bisque;
    height: 50px;
    display: table;
}
.container .left {
    background-color: burlywood;
    height: 50px;
    display: table-cell;
    width: 100%;
}
.container .right {
    background-color: chartreuse;
    width: 50px;
    height: 50px;
    display: inline-block;
    vertical-align: text-top;
}

父级中的两个div（左，右），右侧具有固定宽度，左填充自由空间，两者都在同一行中。（没有位置相对/绝对）

1 个答案:

JSFiddle - DEMO

父级中的两个div（左，右），右侧具有固定宽度，左填充自由空间，两者都在同一行中。 （没有位置相对/绝对）

1 个答案:

JSFiddle - DEMO

父级中的两个div（左，右），右侧具有固定宽度，左填充自由空间，两者都在同一行中。（没有位置相对/绝对）