![](/img/trans.png)
[英]CSS Floated divs are overlapping on window resize. How do I stop this?
[英]CSS floated div overlapping or not moving downward when resize the window
我需要2个div,其中一个向左浮动,因此当我们将窗口调整为小窗口时,第二个div将向下移动。
body, html { width: 100%; height: 100%; } .container { overflow: hidden; } .container div { width: 500px; height: 500px; border: 1px solid black; }
<!DOCTYPE html> <html> <head> <title>Home</title> </head> <body> <div class="container"> <div style="float: left"> aaa </div> <div> bbb </div> </div> </body> </html>
这段代码将使第二个div与第一个div重叠,如果我在容器中添加display:flex,它将不再重叠,但是div的大小将随着窗口大小而调整,并且第二个div不会向下移动。
怎么了? 我需要我的div正好是500px。 谢谢 :)
据我了解,您想在调整浏览器大小后使第二个div变小。 因此,您可以为此使用媒体查询:
body,
html {
width: 100%;
height: 100%;
}
.container {
overflow: hidden;
}
.container div:first-child {
float: left;
width: 500px;
height: 500px;
border: 1px solid red;
}
.container div:last-child {
width: 500px;
height: 500px;
border: 1px solid black;
}
@media (max-width: 500px) {
.container div:last-child {
clear: both;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<div>
aaa
</div>
<div>
bbb
</div>
</div>
</body>
</html>
我分离了两个div的样式,并从内联样式中删除了float:left
。 <meta>
对于媒体查询的工作也很重要。 我使用clear:both
来清除第二个div的第一个div的浮动,因此不影响第二个div。
我没有将其放在代码段中,因为该媒体似乎在这里不起作用,但是在我的计算机上可以工作
您还必须在第二个div中设置float
。 或在媒体查询中,您必须在两个div中都设置display: block
。 检查下面的更新的片段。
body, html { width: 100%; height: 100%; } .container { overflow: hidden; } .container div { width: 500px; height: 500px; border: 1px solid black; }
<!DOCTYPE html> <html> <head> <title>Home</title> </head> <body> <div class="container"> <div style="float: left"> aaa </div> <div style="float: right"> bbb </div> </div> </body> </html>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.