Question

以下是我遇到问题的代码段：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .container {
            background: gray;
        }
        .container .left {
            float: left;
            background: red;
        }
        .container .right {
            float: right;
            background: blue;
        }
        .container .middle {
            float: middle;
            background: green;
        }
    </style>
</head>
<body>
    <div class="container">
        <span class="left">Left</span>
        <span class="middle">Middle</span>
        <span class="right">Right</span>
    </div>
</body>
</html>

我遇到问题<span class='middle'>覆盖了父元素div的剩余灰色区域。我怎么能做到，<span class='middle'>，覆盖所有剩余的灰色区域？

感谢。

Answer 1

“float：middle”不存在。

要实现布局，您可以将display:block;添加到中间<span>，以便它使用整个灰色区域：

<强> DEMO

HTML：

<div class="container">
    <span class="left">Left</span>
    <span class="right">Right</span>
    <span class="middle">Middle</span>
</div>

请注意，您需要更改HTML标记中元素的顺序：右边div必须在“middle”div之前进行

CSS：

    .container {
        background: gray;
    }
    .container .left {
        float: left;
        background: red;
    }
    .container .right {
        float: right;
        background: blue;
    }
    .container .middle {
        display:block;
        background: green;
    }

浮动中间继承剩余区域

1 个答案: