Question

我在这个网站上找到了相关的答案，但我无法找到帮助我的解决方案。我已经创建了我的网站的背景，首先，我使用div标签创建标题（＆＃34; HT＆＃34;）然后使用3个div标记将其划分为3个垂直列（＆＃34; lside＆＃34;，＆＃34; cside＆＃34;，＃34; rside＆＃34;）我将添加不同的内容。最后，还有另一个div标签来制作一个＆＃34;页脚＆＃34;。问题是我在3列之后和页脚之前获得了大量空间。我没有添加任何边距。如何删除此间隙以使列结束的页脚统计信息？

HTML代码 -

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="stylemain.css">
</head>
<body>
<div id="HT">
<img id="imgHT" src="logo.png" height="100" width="300" >
</div>
<div id="lside"></div>
<div id="cside">

</div>
<div id="rside"></div>
<div id="footer"></div>
</body>
</html>

CSS文件 -

body { 
background: #ffffff; 
    margin: 0px; 
    padding: 0px;
}

a { 
color: #2b2bf6;
    text-decoration: underline;
}   
#HT { 
background: #FFFFFF; 
    width: 800px; 
    height: 100px; 
    margin: 0px;
    padding: 0px;
    border: 0px;
}

#imgHT {
margin: 5px;
    padding: 5px;
    border: none;
    height: auto;
    width: auto;
    float: left;
    text-align: left;
}

#lside {
background: #ffffff; 
width: 200px; 
height: 750px; 
margin: 0px; 
padding: 0px; 
border: 0px; 
float: left;
}

#rside {
background: #ffffff; 
width: 400px; 
height: 750px; 
margin: 0px; 
padding: 0px; 
border: 0px; 
float: left;
}

#cside {
background: #c0c0c0; 
width: 1040px; 
height: 750px; 
margin: 0px; 
padding: 0px; 
border: 0px; 
float: left;
}

#footer {
width: 1440px; 
height: 70px; 
margin: 0px; 
padding: 0px; 
border: 0px; 
float: left; 
background: #808080; 
clear:both;
}

编辑：FIDDLE：http://jsfiddle.net/cWjt8/

Answer 1

我是之前删除答案的人，不知道我是否想念你的问题。对不起。

为什么要浮动页脚？我想你想要这样的东西吧？

enter image description here

<body>
<div id="HT">
 <img id="imgHT" src="logo.png" height="100" width="300" />
</div>

<div id="wrapper">
    <div id="left"></div>
    <div id="center"></div>
    <div id="right"></div>
</div>

<div id="footer"></div>
</body>
</html>

使用类似的包装器：

#wrapper {
    max-width:900px;
    margin:0px auto;
}
#wrapper div {
     display:inline;
}
#left {
    background:red;
    width:300px;
    height:300px;
    margin: 0px; 
    padding: 0px;
    float:left;
}
#right {
    background:blue;
    width:300px;
    height:300px;
    margin: 0px; 
    padding: 0px;
    float:right;
}
#center {
    background:green;
    height:300px;
    width:300px;
    margin: 0px; 
    padding: 0px;
    float:left;
}

到目前为止，没有必要浮动页脚。它固定在包装纸下面。

#footer {
width: 1440px; 
height: 70px; 
margin: 0px; 
padding: 0px; 
border: 0px;  
background: #808080; 
clear:both;
}

Answer 2

我无法看到图像，所以它在jsfiddle中不起作用，因为你没有任何边距imma在黑暗中拍摄，尝试向左而不是向左漂浮页脚。

div标签之间的垂直空间

2 个答案: