我无法弄清楚我的CSS是否出现故障，或者我是否对页脚div编码错误，但是我有错误。我遇到的问题是div id =“footer”最终从我的导航栏开始，现在我无法修改页脚大小。
@charset "utf-8";
/* CSS Document */
/* CSS Reset */
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
text-align:center;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* End CSS Reset */
/* Temporary Style for Testing
* {
border:#FFFFFF 1px dashed !important;
}
End Temporary Style for Testing */
/* Layout CSS Rules */
#container {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
width: 1008px;
margin-top: 0px;
margin-right: auto;
margin-left: auto;
padding: 0px;
background-image: url(../images/containerbackground.jpg);
height: 100vh;
}
#header {
width: 1008px;
height: 123px;
background-image: url(../images/Header.jpg);
display:inline-block;
margin: 0 auto;
background-repeat: no-repeat;
}
#logo {
width: 236px;
height: 80px;
float: left;
margin-top: 15px;
margin-right: 25px;
margin-bottom: 25px;
margin-left: 25px;
}
#navBar {
width: 1008px;
height: 43px;
float: left;
}
#navBar .navButtons {
width: 252px;
height: 43px;
float: left;
}
#textContent {
width: 706px;
height: 495px;
float: left;
padding-right: 0px;
color: #000066;
text-align: left;
padding-bottom: 15px;
}
#textContent h1 {
font-family: "Arial Black", Gadget, sans-serif;
font-size: 18px;
font-style: normal;
font-weight: bold;
color: #000066;
text-align: center;
padding-bottom: 10px;
}
#imageContent {
width: 254px;
height: 250px;
float: left;
padding: 20px;
img.center{
text-align: center;
margin: 0 auto;
padding right:48px;
}
/* End Layout Styles */
/* Tag Selectors */
textContent p {
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
font-style:normal;
font-weight:normal;
color:#FFFFFF;
line-height:20px;
text-align: left;
}
#imageContent img {
border:#333 solid 1px;
}
#footerContent {
margin-left: 150px;
padding: 0px;
float: left;
height: 58px;
width: 1008px;
}
#
img {
}
#w3 img {
border:0px;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Home Page</title>
<link href="css/mainnav.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/styles_finished.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<!-- Container for whole site-->
<div>
<div id="container">
<!-- Header Content -->
<div id="header">
<div id="logo">
<a href="index.php" title="Link to home page"> <img src="images/logo.png" alt="logo"></a>
</div>
</div>
<!-- End Header Content -->
<!-- Logo in header content -->
<!-- End logo header content -->
<!-- main Navigation Bar -->
<div id="navBar">
<!-- main Navigation Bar List -->
<ul class="navBar">
<li><a href="about.php" title="about">About</a></li>
<li><a href="news.php" title="news">News</a></li>
<li><a href="events.php" title="events">Events</a>
<ul class="navBar">
<li><a href="#.php" title="#">page 1</a></li>
<li><a href="#.php" title="#">page 2</a></li>
<li><a href="#.php" title="#">page 3</a></li>
</ul> <!-- end portfolio submenu -->
</li>
<li><a href="contact.php" title="Contact">Contact</a></li>
</ul>
<!-- End main Navigation Bar List -->
</div> <!-- End main Navigation Bar -->
<!-- Image Content Area -->
<div id="imageContent"><img src="images/textimage.png" alt="Image Placeholder">
<!-- end image placeholder -->
</div>
<!-- End Main Content Area -->
<!-- Text Content Area -->
<div id="textContent">
<h1>Welcome</h1>
<p>Thanks for viewing this website, I will past a recent news article as a place holder. OCEAN ISLE, N.C. -- Flooding has been a concern for Ocean Isle Beach, just north of Myrtle Beach, in recent years. However, the heavy rainfall the Carolinas have seen lately is now causing concern for tidal flooding.
Photos sent to us by Christopher SurigaOCEAN ISLE, N.C. -- Flooding has been a concern for Ocean Isle Beach, just north of Myrtle Beach, in recent years. However, the heavy rainfall the Carolinas have seen lately is now causing concern for tidal flooding.
Photos sent to us by Christopher SurigaOCEAN ISLE, N.C. -- Flooding has been a concern for Ocean Isle Beach, just north of Myrtle Beach, in recent years. However, the heavy rainfall the Carolinas have seen lately is now causing concern for tidal flooding.
Photos sent to us by Christopher SurigaOCEAN ISLE, N.C. -- Flooding has been a concern for Ocean Isle Beach, just north of Myrtle Beach, in recent years. However, the heavy rainfall the Carolinas have seen lately is now causing concern for tidal flooding.
Photos sent to us by Christopher Suriga </p>
</div>
<!-- End Text Content Area-->
<!-- Footer Content -->
<!-- Footer Navigation List -->
<div id="footerContent">
© 2015 Created by Bounkong Sibounheuang
<a href="contact.php" title="Contact Us">Contact Us</a>
<a href="https://www.gliffy.com/go/publish/7665711" title="Site Wireframe">Wireframe</a>
<a href="https://www.gliffy.com/go/publish/7596189" title="Sitmap">Sitemap</a>
<a href="http://voo2do.com/pub/bounkongm6" title="Voo2Do">Voo2Do</a>
<!-- End Footer Navigation List -->
<!-- End Footer Content Area -->
</div>
</div>
<a href="http://validator.w3.org/check?uri=referer"><img src="images/valid_html5.gif" alt="Valid HTML 5"></a>
<a href="http://jigsaw.w3.org/css-validator/check/referer"><img src="images/valid-css.png" alt="Valid CSS"></a>
</div>
<!--End container for whole site-->
<!--W3C Code Validator Start-->
<!--W3C Code Validator End-->
</body>
</html>
答案 0 :(得分：1)
首先从float:left移除#textContent，然后将clear:both添加到#footerContent
答案 1 :(得分：0)
尝试删除float: left;
#footerContent {
margin-left: 150px;
padding: 0px;
height: 58px;
width: 1008px;
}
答案 2 :(得分：0)
我已经找到了问题！我的CSS错误#imageContent {
width: 254px;
height: 250px;
float: left;
padding: 20px;
img.center{
text-align: center;
margin: 0 auto;
padding right:48px;
}
我拿出了img.center{
text-align: center;
然后我从
</div>
</div>
<a href="http://validator.w3.org/check?uri=referer"><img src="images/valid_html5.gif" alt="Valid HTML 5"></a>
<a href="http://jigsaw.w3.org/css-validator/check/referer"><img src="images/valid-css.png" alt="Valid CSS"></a>
</div>
到
<a href="http://validator.w3.org/check?uri=referer"><img src="images/valid_html5.gif" alt="Valid HTML 5"></a>
<a href="http://jigsaw.w3.org/css-validator/check/referer"><img src="images/valid-css.png" alt="Valid CSS"></a>
</div>
</div>