gpt4 book ai didi

html - CSS responsive - 清除两者后,div pill up/stack 而不是恢复正常

转载 作者:太空宇宙 更新时间:2023-11-04 02:05:13 25 4
gpt4 key购买 nike

我尝试学习响应式网站。但我被困在这里

div {
display: block;
height: 50px;
}
.header {
width: 50%;
background-color: red;
}
.left {
background-color: green;
float: left;
width: 50%;
}
.right {
background-color: blue;
float: left;
width : 50%;
}
.clear {
display: none;
clear: both;
}
.footer {
width: 50%;
background-color: yellow;
}
<!doctype html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
</head>
<body style="width: 100%">
<div class="header">without float</div>
<div class="header">without float</div>
<div class="left">kiri</div>
<div class="right">kanan</div>
<div class="clear"></div>
<div class="footer">after clear xxxxxxxxxx xxxxxx</div>
<div class="footer">after clear shshjsjaa shsusus</div>
</body>
</html>

为什么 div 类页脚不像类页眉那样恢复正常?

据我所知 clear: clear :left 都是 erase float: left 规则。但我不知道为什么我的页脚看起来像药丸一样

找这张图看显示 enter image description here

最佳答案

你不应该添加“Display:none;”用“清除:两者”。这使得 div 隐藏。

关于html - CSS responsive - 清除两者后,div pill up/stack 而不是恢复正常,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40902413/

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