![](/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.