这是我有问题的代码片段：
<!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'>如何使它覆盖所有剩余的灰色区域？谢谢。
最佳答案
“ 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必须在“中间” div之前
CSS：
.container {
background: gray;
}
.container .left {
float: left;
background: red;
}
.container .right {
float: right;
background: blue;
}
.container .middle {
display:block;
background: green;
}
关于html - float 中间固有剩余区域，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/23674638/