gpt4 book ai didi

html - 页面底部的空白没有任何帮助

转载 作者:太空宇宙 更新时间:2023-11-04 10:12:26 24 4
gpt4 key购买 nike

我的页面底部有空白区域。我尝试了各种帮助别人的方法,但对我没有用,包括 padding、margin、height、auto 和其他方法。

这是我的代码:

.profwindow {
position: relative;
left: 40px;
float: left;
width: 250px;
top: 50px;
height: 200px;
background-color: rebeccapurple;
}

.chatwwindow {
position: relative;
left: -210px;
float: left;
height: 370px;
width: 250px;
top: 280px;

background-color: red;
}

.mapwindow {
position: relative;
float: right;
width: 1000px;
height: 560px;
right: 10px;
background-color: red;
top: -430px;

}

.navigation {
position: relative;
float: right;
right: 10px;
top: -460px;
height: 150px;
width: 1000px;
background-color: red;
}

#mainphplogo {
position: relative;
width: 20%;
left: 40px;
top: 20px;
background-color: red;
}
<!DOCTYPE html>
<html lang="lt">
<head>
<title>title</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>
<div id="mainphplogo">
<a href="index.php"><img src="images/logo.png" height="100px" ></a>
</div>
<div class="profwindow"></div>
<div class="chatwwindow"></div>
<div class="navigation"></div>
<div class="mapwindow"></div>

</body>
</html>

这是演示影响页面的问题的最小代码代码示例,如您所见,页面末尾有一个黑白区域,我无法将其删除。

最佳答案

第一个建议:使用引导网格或类似的东西切换到响应式设计。

对于您的具体问题,删除

float: right;

from .mapwindow 将修复额外的空白,因为 float 它会将初始点设置在底部很远的地方,并且您可以使用

top: -430px;

所以初始位置还是保持不变

关于html - 页面底部的空白没有任何帮助,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37489979/

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