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>

Working Example

Answer 2

或者，如果您正在寻找LEFT div保持静态宽度而RIGHT div扩展并缩小页面大小，则使用以下代码：

.left {
    float: left;
    position: relative;
    width: 80px;
    background-color: red;
}

.right {
    position: relative;
    text-align: left;
    margin-left: 80px;
    background-color: yellow;
}

HTML就是......

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

Answer 3

那是因为div是一个块元素，这意味着它总会打破流程。您可以做的是将div的display更改为inline，将float更改为left。

Answer 4

您可以将position:relative;的{{1}}更改为#right。这会将元素放置在其父元素的右上角。

示例：http://jsfiddle.net/WaQGW/

Answer 5

现在可以使用flex完成。

将容器＆（在这种情况下为body）display属性设置为flex，然后将左div的宽度设置为100%。< / p>

＆＃13;

body {
    margin: 0;
    padding: 0;
    display: flex;
}

#left {
    background-color: red;
    width: 100%;
}

#right {
    width: 80px;
    background-color: yellow;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
    <title>#{get 'title' /}</title>
</head>
<body>
<div id="left">
    Left
</div>
<div id="right">
    Right
</div>
</body>
</html>

＆＃13;

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

5 个答案: