[英]CSS floated div overlapping or not moving downward when resize the window
I need 2 div with one is floated left so when we resize the window into a small window the second div will move downward. 我需要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>
this code will make the second div overlap with the first div, if I add display:flex in the container it won't overlap anymore but the div size is resizing with the windows size and the second div won't go downward. 这段代码将使第二个div与第一个div重叠,如果我在容器中添加display:flex,它将不再重叠,但是div的大小将随着窗口大小而调整,并且第二个div不会向下移动。
What is wrong? 怎么了? I need my div to be exactly 500px. 我需要我的div正好是500px。 Thanks :) 谢谢 :)
From what I understand, you want to make the second div go down after resizing the browser. 据我了解,您想在调整浏览器大小后使第二个div变小。 So you can use media queries for that: 因此,您可以为此使用媒体查询:
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>
I separated the style of the two divs, and removed the float:left
from the inline style. 我分离了两个div的样式,并从内联样式中删除了float:left
。 The <meta>
is also important for the media query to work. <meta>
对于媒体查询的工作也很重要。 I used clear:both
to clear the float of the first div from the second, thus not affecting the second div. 我使用clear:both
来清除第二个div的第一个div的浮动,因此不影响第二个div。
I didn't put this in a snippet because the media does not seem to work there, but is working in my computer 我没有将其放在代码段中,因为该媒体似乎在这里不起作用,但是在我的计算机上可以工作
You have to set float
in second div also. 您还必须在第二个div中设置float
。 Or in media query you have to set the display: block
in both div. 或在媒体查询中,您必须在两个div中都设置display: block
。 check updated snippet below.. 检查下面的更新的片段。
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.