gpt4 book ai didi

html - float 中间继承剩余区域

转载 作者:行者123 更新时间:2023-11-28 17:43:26 25 4
gpt4 key购买 nike

这是我遇到问题的代码片段:

<!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 :中间”不存在。

要实现布局,您可以添加 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com