我正在处理我的网站模板，并且textcontent乱序，导致它消耗我的ul类Navbar。我需要将文本内容区域设置为495像素高，但我无法确定哪条线路被搞砸了。
@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: 1020px;
margin-right: auto;
margin-left: auto;
margin-bottom: 0;
background-image: url(../images/containerbackground.jpg);
}
#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;
}
#imageContent {
width: 254px;
height: 250px;
float: left;
img.center{
text-align: center;
margin: 0 auto;
}
#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;
}
#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;
}
#footerContent {
width: 1008px;
height: 58px;
float: left;
}
/* End Layout Styles */
/* Tag Selectors */
<!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 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">
<!-- 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="footer">
© 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 -->
<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>
<!--End container for whole site-->
<!--W3C Code Validator Start-->
<!--W3C Code Validator End-->
</body>
</html>
答案 0 :(得分：1)
对Navbar使用float：left属性。