我试图解决这个问题，我对此比较陌生，所以请不要判断.. 它是彻头彻尾的div，无法正常工作
它提供了一些额外的信息，但它只是在页面调整大小时不断更改位置，有人请帮忙吗？谢谢.. 此致，杰克。
<html>
<head>
<!--<link href="styles.css" rel="stylesheet" type="text/css">-->
<style>
* {font:12px arial;padding:0px;margin:0px;}
#wrapper{
margin: 0 auto;
width: 1130px;
}
#header {position:relative;height:100px;width:1130px;}
#header img {position:absolute;top:10px;}
#nav {position:absolute;right:0px;}
#nav ul {padding: 5px;
border-left: 1px;
text-align: center;
width: 600px;
}
#nav li {float:left;display: block;padding: 8px 15px; border-right: 2px solid #eb332c;
position:relative;top:30px;}
#nav li a:hover {color: #c00;background-color: #fff;
}
#nav li.last{border-right:none;
}
#nav li a{
text-decoration: none;
font-weight: bold;
font-size:16px;
color:000000;
}
#headings {position:relative;height:500px;width:865px;margin:0px auto;}
#headings img {display:inline;
background-color:#ebebeb;
padding:150px 0px 50px 0px;}
#content {width:865px;margin:0px auto;}
#bottomleft {float:left;width:400px;}
#bottomright {float:right;width:200px;}
#footer {background-color:#eb322c;
width:100%;
height:140px;
clear:both;
}
#footer_content{
width:1130px;
background-color:eb332c;
margin:0px auto;
height:140px;
position:relative;
color:white;
}
h1{
background-color:#FFFFFF;
text-align:left;
font-size:30px;
position:absolute;top:60px;left:0px;
z-index:100;
width:340px;
}
h2{
font-size:20px;
position:absolute;bottom:120px;
}
h3{
font-size:20px;
position:absolute;bottom:122px;
position:absolute;right:372px;
}
h4{
font-size:20px;
position:absolute;bottom:122px;
position:absolute;right:118px;
}
h5
{
font-size:18px;
position:absolute;bottom:250px;
position:absolute;left:0px;
border-bottom: 1px solid #eb332c;
width:537px;
}
p.para{
position:relative;left:3px;bottom:25px;
font-family:arial;
font-size:12px;
width:500px;
}
#bottomleft{
position:relative;
}
#bottomright{
margin-top: -60px;
margin-right: 55px;
margin-left: auto;
margin-bottom: auto;
position:relative;
background-color:ebebeb;
width:268px;
height:220px;
}
h6.address{
border-bottom: 1px solid #eb332c;width:230px;font-size:16px;
}
</style>
</head>
<title>
Cochranes Law Firm
</title>
<body>
<div id="wrapper">
<div id="header">
<img src="images/logo.png">
<div id="nav">
<ul>
<li class="Home"><a href="#">Home </a></li>
<li class="About"><a href="#">About Us </a></li>
<li class="Team"><a href="#">Our team </a></li>
<li class="Services"><a href="#">Our Services </a></li>
<li class="last"><a href="#"> Contact Us </a></li>
</ul>
</div>
</div>
<div id="headings">
<h1>Local <span style="color:eb332c;font-weight:bold">Billingham</span> Solicitors Firm </h1>
<img src="images/family.jpg"class="family">
<img src="images/home.jpg"class="home">
<img src="images/care.jpg"class="care">
<h2>Family Law</h2>
<h3>Buying & Selling Property</h3>
<h4>Wills, Trusts & Probate</h4>
</div>
<div id="content">
<div id="bottomleft">
<h5>Welcome to Cochranes Law Firm</h5>
<p class="para">We are a family High Street Practice, in Billingham Town Centre, providing an
important service to the local community. we are wills and probate. buying and Selling, as well as Family law Solicitors in the Billingham and Stockton-on-tees area. If you would like any further information please feel free to contact us by phone, email or our contact form.
</p>
<p class="lorem"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed accumsan, urna sit amet euismod gravida, elit ante placerat orci, et porttitor nunc velit malesuada tortor. Nam ac nisl non nunc commodo vestibulum a eu velit. Sed vitae arcu sit amet nulla ornare fringilla sodales vel justo. Cras hendrerit libero a mauris gravida lobortis. Donec iaculis tincidunt est, non rutrum lorem dictum vitae. Curabitur non justo sed est accumsan posuere id eget justo. Nunc in justo congue, laoreet sem sed, scelerisque nulla. Fusce in urna suscipit, imperdiet purus et, ornare nunc. Ut vestibulum consectetur metus, vitae ultrices lacus placerat aliquet.</p>
</div>
<div id="bottomright">
<h6 class="address"> Contact Address</h6>
<p class="pclass">Cochranes Law Firm <br> 67 Queensway<br>
Billingham<br>TS23 2KH</p>
<h6 class="commonnum">Contact Numbers</h6>
<p class="nums">Telephone: 01642 266800<br>Fax:01642 366809<br>
DX 63160 BILLINGHAM</p>
<p class="Email">info@cochraneslawfirm.co.uk</p>
<h6 class="contactmail">Contact E-Mail Address</h6>
</div>
</div>
</div>
<div id="footer">
<div id="footer_content">
<p class="foot">©2014 Cochranes Law Firm | Privacy Policy | Terms and Conditions
Web Design by MCWare IT Solutions.</p>
<img src="images/mcware.png">
<img src="images/accreditations.png" class="accreditations">
<small>Cochranes Law Firm is a Limited Liability registered in England and Wales number OC343046 and our VAT number is 508 983002. The registered office is at 67 Queensway, Billingham. TS23 2LU. Authorised and regulated by the Solicitors Regulation authority number 547210 under rule 7.07(1) of the Solicitors Code Of Conduct. We have worldwide professional indemnity insurance through amtrust Europe Limited, No2 Minster Court, Minicing Lane, LONDON, EC3R 7BB. Our policy number is P13A298125P and P13B295219P. </small>
</div>
</div>
</body>
</html>
答案 0 :(得分：0)
以下是我对此的看法，请记住，我无法猜测您的初始布局以及我无法访问您的图片。
建议：
不要害怕使用DIV。它们是容器，因此您可以更好地控制布局。
在div中使用背景颜色：这样您就可以看到块并知道为什么某些元素没有正确对齐或堆叠。
我做了什么：
您将看到调整页面大小时没有元素移动。如果您有任何疑问，请不要犹豫。
以下是代码：
<!DOCTYPE html>
<html lang="">
<head>
<title>Title Page</title>
<style type="text/css">
*{font: 12px arial;}
html,body{margin:0;padding: 0;}
body{background: #FFF;}
html{background: #eb322c;}
h1,h2,h3,h4,h5,h6{padding: 0;margin: 0;}
.header{
width: 100%;
height: 100px;
background: #f2f2f2;
}
.center-div{
width: 900px;
margin: 0 auto;
}
.logo-container{
background: #92F5AD;
height: 100px;
width: 100px;
float: left;
}
.nav{
float: right;
background: #F5E255;
height: 100px;
}
.nav ul {
border-left: 1px;
text-align: center;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
.nav li {
float:left;
display: block;
padding: 8px 15px;
border-right: 2px solid #eb332c;
position:relative;
top:30px;
}
.nav li a:hover {
color: #c00;background-color: #fff;
}
.nav li.last{
border-right:none;
}
.nav li a{
text-decoration: none;
font-weight: bold;
font-size:16px;
color:#000;
}
.wrapper{
min-height: 100%;
height: auto !important;
height: 100%;
}
.mainContent{
width: 900px;
height: 100%;
margin: 0 auto;
background: #D8D8D8;
}
.headings{
width: 100%;
display: block;
}
.top-container{
width: 100%;
height: 220px;
display: block;
padding-top: 50px;
position: relative;
padding-bottom: 100px;
}
.headtitle{
background-color:#FFFFFF;
text-align:left;
font-size:30px;
position:absolute;
margin-top: 50px;
z-index:100;
}
.img-container{
float: left;
width: 33.3%;
height: 220px;
}
.img1{background: #f5f5f5;}
.img2{background: #9DEBFF;}
.img3{background: #9DFFC8;}
.bottom-headings{
clear: both;
display: block;
width: 100%;
padding-bottom: 50px;
}
.subTitle{
display: inline-block;
width: 33.1%;
}
.s1{background: #f5f5f5;}
.s2{background: #9DEBFF;}
.s3{background: #9DFFC8;}
.info-container{
width: 100%;
height: 292px;
background: #A59DFF;
display: block;
}
.message-container{
width: 60%;
float: left;
background: #71A59F;
}
.contact-container{
width: 40%;
display: inline-block;
background: #71A582;
}
.infoTitle{
border-bottom: 1px solid #eb332c;
}
.para, .lorem{
padding-right: 50px;
}
.footer{
background:#eb322c;
width:100%;
height:100%;
clear:both;
position: relative;
}
.footer p{
color:#FFF;
}
</style>
</head>
<body>
<div id="header" class="header">
<div class="center-div">
<div class="logo-container">
Logo
</div>
<div class="nav">
<ul>
<li class="Home"><a href="#">Home </a></li>
<li class="About"><a href="#">About Us </a></li>
<li class="Team"><a href="#">Our team </a></li>
<li class="Services"><a href="#">Our Services </a></li>
<li class="last"><a href="#"> Contact Us </a></li>
</ul>
</div>
</div>
</div>
<div class="wrapper">
<div class="mainContent">
<!-- HEADINGS CONTAINER -->
<div class="headings">
<div class="top-container">
<h1 class="headtitle">Local <span style="color:#eb332c;font-weight:bold">Billingham</span> Solicitors Firm</h1>
<div class="img-container img1">
</div>
<div class="img-container img2">
</div>
<div class="img-container img3">
</div>
</div>
<div class="bottom-headings">
<h2 class="subTitle s1">Family Law</h2>
<h3 class="subTitle s2">Buying & Selling Property</h3>
<h4 class="subTitle s3">Wills, Trusts & Probate</h4>
</div>
</div>
<!-- Bottom Information Container -->
<div class="info-container">
<div class="message-container">
<h5 class="infoTitle">Welcome to Cochranes Law Firm</h5>
<p class="para">We are a family High Street Practice, in Billingham Town Centre, providing an
important service to the local community. we are wills and probate. buying and Selling, as well as Family law Solicitors in the Billingham and Stockton-on-tees area. If you would like any further information please feel free to contact us by phone, email or our contact form.
</p>
<p class="lorem"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed accumsan, urna sit amet euismod gravida, elit ante placerat orci, et porttitor nunc velit malesuada tortor. Nam ac nisl non nunc commodo vestibulum a eu velit. Sed vitae arcu sit amet nulla ornare fringilla sodales vel justo. Cras hendrerit libero a mauris gravida lobortis. Donec iaculis tincidunt est, non rutrum lorem dictum vitae. Curabitur non justo sed est accumsan posuere id eget justo. Nunc in justo congue, laoreet sem sed, scelerisque nulla. Fusce in urna suscipit, imperdiet purus et, ornare nunc. Ut vestibulum consectetur metus, vitae ultrices lacus placerat aliquet.</p>
</div>
<div class="contact-container">
<h5 class="infoTitle" class="address"> Contact Address</h6>
<p class="pclass">Cochranes Law Firm <br> 67 Queensway<br>
Billingham<br>TS23 2KH</p>
<h6 class="commonnum">Contact Numbers</h6>
<p class="nums">Telephone: 01642 266800<br>Fax:01642 366809<br>
DX 63160 BILLINGHAM</p>
<p class="Email">info@cochraneslawfirm.co.uk</p>
<h6 class="contactmail">Contact E-Mail Address</h6>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="center-div">
<p class="foot">©2014 Cochranes Law Firm | Privacy Policy | Terms and Conditions
Web Design by MCWare IT Solutions.</p>
<img src="images/mcware.png">
<img src="images/accreditations.png" class="accreditations">
<p> <small>Cochranes Law Firm is a Limited Liability registered in England and Wales number OC343046 and our VAT number is 508 983002. The registered office is at 67 Queensway, Billingham. TS23 2LU. Authorised and regulated by the Solicitors Regulation authority number 547210 under rule 7.07(1) of the Solicitors Code Of Conduct. We have worldwide professional indemnity insurance through amtrust Europe Limited, No2 Minster Court, Minicing Lane, LONDON, EC3R 7BB. Our policy number is P13A298125P and P13B295219P. </small></p>
</div>
</div>
</body>
以下是JsFiddle