我创建了一个网页，它在我的计算机上的 IE 9 浏览器中运行良好，但自从将其上传到网络后，这 3 个元素应该与页脚一起并排 float ，但最终却遍布整个页面地方。在 firefox、safari 和 IE 中，IE 是显示效果最好的浏览器。我已经尝试了几乎所有我能想到的。页面上的几个 div 使用我在 photoshop 中做的透明背景。任何想法都将不胜感激。
HTML:
<!DOCTYPE html >
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css"
href="123.css"/>
<head>
<META http-equiv="Content-Style-Type" content="text/css">
</head>
<body>
<div class="wrapper">
<table width="1000px" height="40px" style="background-color:#494545;">
<tr>
<td width="700"></td>
<td width="50" margin="10"><a href="html\home.html">
<img src="flag1.jpg" border="0"></a></td>
<td width="50" margin="10"><a href="html\home.html">
<img src="flag2.jpg" border="0"></a></td>
<td width="50" margin="10"><a href="html\home.html">
<img src="flag3.jpg" border="0"></a></td>
</tr>
</table>
<div id="topdiv">
<image src="graphics/toplogo.png">
</div>
<div class="main">
<ul>
<li >
<br/><br/><br/><br/>
<li>
<br/><br/><br/><br/>
<li>
<br/><br/><br/><br/>
<li>
</ul>
<div class="text">
text goes here
</div>
<div class="right">
<strong>Promotions</strong>
<br/>
<br/>
div>
</div>
<div class="footer"></div>
</div>
</body>
</html>
和CSS:
body {
background-image: url("graphics/backtab.png");
background-repeat: repeat;
margin: 0;
padding: 0;
}
.wrapper {
background-image: url("graphics/contrana.png");
width: 1000px;
text-align: left;
margin: 0 auto;
}
#topdiv {
width: 1000;
height: 180;
text-align: left;
position: relative;
margin-top: 0;
padding-top: 0;
display: block;
}
.main {
width: auto position :relative;
margin: 0 auto;
background-image: url("graphics/tr.jpg");
border: 5px solid #0A1379;
padding-top: 60;
padding-left: 50;
display: block;
overflow: visible;
}
ul {
background-color: white;
width: 150px;
margin-top: 60px;
float: left;
margin-right: 50;
padding: 40;
border: 2px solid black;
filter: alpha(opacity=70);
opacity: 0.7;
}
li {
list-style-type: none;
text-decoration: none;
font-weight: bold;
}
a:link {
color: black;
font-family: verdana;
text-decoration: none;
list-style-type: none;
outline: 0;
}
a:visited {
color: black;
font-family: verdana;
list-style-type: none;
text-decoration: none;
outline: 0;
}
a:hover {
color: #EE9613;
font-family: verdana;
text-decoration: none;
font-family: verdana;
list-style-type: none;
outline: 0;
}
a:active {
color: black;
font-family: verdana;
text-decoration: none;
font-family: verdana;
list-style-type: none;
outline: 0;
}
.text {
background-image: url("graphics/textback.png");
width: 500px;
float: left;
font-family: verdana;
font-size: 14;
padding: 10px 15px;
margin-top: 70px;
word-spacing: 10px;
color: black;
line-height: 18px;
text-align: left;
margin-right: 15px;
display: inline;
border: 2px solid black;
}
.right {
width: 190px;
float: right;
margin-top: 60;
background-image: url
("graphics/advertback.png");
margin-right: 20;
border: 2px solid black;
}
#footer {
width: 1000px;
height: 50px;
background-image: url
("graphics/footer.jpg");
background-repeat: repeat-x;
text-align: center;
padding-top: 15;
font-family: verdana;
font-size: 12px;
text-color: white;
margin: 0 auto;
font-weight: bold;
}
最佳答案
您的代码有错误，包装器 div 未关闭，并且您还有其他未关闭的标签。而不是使用一堆 <br/>您应该只使用填充和边距的标签。
这是一个基本的 3 列 CSS 布局。使用它比尝试修复代码更容易。
HTML
<div id="container">
<div id="header">
<p>Header</p>
</div>
<div id="primary">
<p>Primary Sidebar</p>
</div>
<div id="content">
<p>Main content</p>
</div>
<div id="secondary">
<p>Secondary Sidebar</p>
</div>
<div id="footer">
<p>Footer</p>
</div>
</div>
CSS
#container {
width: 960px;
margin: 0 auto;
}
#primary {
float: left;
width: 240px;
}
#content {
float: left;
width: 480px;
}
#secondary {
float: left;
width: 240px;
}
#footer {
clear: both;
}
关于html - css 定位 - float 3 个元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10685822/