我为自己的DofE探险建立了一个网站，但是在让事情正常工作方面遇到了一些麻烦。当前浮动在主容器右侧的文本应该位于导航部分的旁边，但是ma尝试这样做是迄今为止不成功的。关于这个的任何想法？
如果有帮助，我希望它看起来像这样：W3schools CSS Help Code
@charset "utf-8";
/* CSS Document */
* {
box-sizing: border-box;
}
body {
background-color: #EEE;
}
#header {
background-color: #66CCFF;
margin: auto;
text-align:center;
font-family: Helvetica;
}
#container {
background-color: white;
width: 800px;
margin-left: auto;
margin-right: auto;
font-family: Helvetica;
}
.main {
font-family: Helvetica;
width: 70%;
margin-left: auto;
float: right;
background-color:#f2f2f2;
clear: left;
display: inline;
/*margin: 1px;*/
}
#main2 {
width: 799px;
font-family: Helvetica;
width: 50%;
display: inline;
background-color:#f2f2f2;
/*margin: 1px;*/
}
#nav{
padding: 3px;
font-family: Helvetica;
list-style-type: none;
}
#nav li a:hover {
color: red;
}
#nav li {
text-decoration: none;
display: block;
padding: 5px;
margin: 5px;
margin-left: 0px;
background-color: #dddddd;
width: 25%;
}
#nav ul {
list-style-type: none;
margin: 0;
padding: 0;
fl
}
#content {
padding:10px;
}
#footer{
clear: both;
color: white;
background-color: grey;
text-align: right;
padding: 0.5px;
}
#footer-margin{
margin: 5px;
}
img {
/*margin-left: auto;
margin-right: auto;*/
text-align:center;
border-style: solid;
border-width: 1px;
border-color: black;
clear: right;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DofE:Expedition Aim</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id = "container"><!--start container-->
<div id = "header">
<h1>DofE Expedition Aim</h1>
</div>
<div id = "content">
<div id = "nav"><!-- start nav tag -->
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="page_1.html">Our Aim</a></li>
<li><a href="page_2.html">How we acheived it</a></li>
<li><a href="page_3.html">Extra info (tbd)</a></li>
</ul>
</div><!-- nav close tag -->
<div class = "clearfix">
<div class = "main">
<p>This page shows what happened on out DofE expedition and the things that we did when not on expedition.</p>
<p>This includes doing map work, fitness and orginising and running events localy.</p>
<p>On the following pages, you can find the various evidence to show you what we did and how it benefited us. (or didn't)</p>
</div><!-- "main" end tag -->
<!--<div id = "main2">
<p>This is a test of a second column that should float to the right of the other.</p>
</div>-->
</div>
<!-- <div id = "img.1">
<img src="logo.jpg" alt="DofE Logo goes here" height="100" width="73">
</div>-->
</div>
<div id = "footer">
<div id = "footer-margin">
<p>Copyright © Dom Brown 2017</p>
</div>
</div>
</div>
</body>
</html>
答案 0 :(得分：0)
像这样设置你的CSS
$('#numbers').change(function() {
$('.number').hide();
});
答案 1 :(得分：0)
你需要玩填充等等，但这将导航和主要内容并排。基本上你有你的clearfix容器环绕导航，这是全宽。我还将float: left;应用于nav和main。
@charset "utf-8";
/* CSS Document */
* {
box-sizing: border-box;
}
body {
background-color: #EEE;
}
#header {
background-color: #66CCFF;
margin: auto;
text-align:center;
font-family: Helvetica;
}
#container {
background-color: white;
width: 800px;
margin-left: auto;
margin-right: auto;
font-family: Helvetica;
}
.main {
font-family: Helvetica;
width: 70%;
margin-left: auto;
float: left;
background-color:#f2f2f2;
display: inline;
/*margin: 1px;*/
}
#main2 {
width: 799px;
font-family: Helvetica;
width: 50%;
display: inline;
background-color:#f2f2f2;
/*margin: 1px;*/
}
#nav{
padding: 3px;
font-family: Helvetica;
list-style-type: none;
width: 25%;
float: left;
}
#nav li a:hover {
color: red;
}
#nav li {
text-decoration: none;
display: block;
padding: 5px;
margin: 5px;
margin-left: 0px;
background-color: #dddddd;
}
#nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#content {
padding:10px;
}
#footer{
clear: both;
color: white;
background-color: grey;
text-align: right;
padding: 0.5px;
}
#footer-margin{
margin: 5px;
}
img {
/*margin-left: auto;
margin-right: auto;*/
text-align:center;
border-style: solid;
border-width: 1px;
border-color: black;
clear: right;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DofE:Expedition Aim</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id = "container"><!--start container-->
<div id = "header">
<h1>DofE Expedition Aim</h1>
</div>
<div id = "content" class="clearfix">
<div id = "nav"><!-- start nav tag -->
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="page_1.html">Our Aim</a></li>
<li><a href="page_2.html">How we acheived it</a></li>
<li><a href="page_3.html">Extra info (tbd)</a></li>
</ul>
</div><!-- nav close tag -->
<div class = "main">
<p>This page shows what happened on out DofE expedition and the things that we did when not on expedition.</p>
<p>This includes doing map work, fitness and orginising and running events localy.</p>
<p>On the following pages, you can find the various evidence to show you what we did and how it benefited us. (or didn't)</p>
</div><!-- "main" end tag -->
<!--<div id = "main2">
<p>This is a test of a second column that should float to the right of the other.</p>
</div>-->
<!-- <div id = "img.1">
<img src="logo.jpg" alt="DofE Logo goes here" height="100" width="73">
</div>-->
</div>
<div id = "footer">
<div id = "footer-margin">
<p>Copyright © Dom Brown 2017</p>
</div>
</div>
</div>
</body>
</html>