你如何将两个div放在一起,以便填满可用空间

Question

我有两个div,右边一个是80px宽,另一个应该填满剩下的空间.到目前为止我试过:

<!DOCTYPE html>

<html>
<head>
    <title>#{get 'title' /}</title>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
        }

        #left {
            position: relative;
            margin-right: 80px;
            background-color: red;
        }

        #right {
            float: right;
            position: relative;
            text-align: left;
            width: 80px;
            background-color: yellow;
        }
    </style>
</head>
<body>
<div id="left">
    Left
</div>
<div id="right">
    Right
</div>
</body>
</html>

但是,右侧框始终位于左侧框下方,而不是右侧框.我想这是因为保证金.我也尝试了一个左边距:-80px在右边但这似乎没有改变任何东西.那么我该如何更改CSS以使右边的div与左边的div在同一行？

Answer 1

div在左前方右转.

<div id="right">
    Right
</div>
<div id="left">
    Left
</div>

工作实例