我正在创建一个网页。现在我的导航栏和标题看起来很好，但我很难看到正文。我想知道如何让我的段落漂浮在导航栏的右侧。现在他们被困在它下面。我会使用什么CSS代码使其浮动到右边？
这就是到目前为止的http://i.imgur.com/SsJGW7w.png ......而在此之下我想要在导航栏旁边http://i.imgur.com/mq3TVrZ.png
<!DOCTYPE html>
<html>
<head>
<!-- Author: Abdullahi Jama 0003 -->
<title>Cycling Tours</title>
<link rel="stylesheet" type="text/css" media="print" href="printstyles.css" >
<link rel="stylesheet" type="text/css" href="aboutus.css" >
</head>
<body>
<header>
<a href="about_us.html"><img src="images/bicycle_axle_sm.jpg" alt="This is a picture of a axle"></a>
<h1>Cycling Tours</h1>
</header>
<div class="navmenu">
<nav>
<ul>
<li><a href="aboutus.html">AboutUs</a></li>
<hr>
<li><a href="#">AskUs</a></li>
<hr>
<li><a href="#">Destinations</a></li>
<hr>
<li><a href="#">FAQ</a></li>
<hr>
<li><a href="#">Reviews</a></li>
<hr>
<li><a href="#">Seminars</a></li>
<hr>
<li><a href="#">Trip Prep</a></li>
<hr>
</ul>
</nav>
</div>
<div class="paragraph">
<h2>About Us</h2>
<p>Cycling Tours began when Bill Randolf and three of his friends from high school began to cycle regularly every weekend.
Their routine cycling evolved into frequent cycling trips and they cultivated a following. Before they knew it, other friends and family members asked to join them in their trips.</p>
<div id="dust_jpeg">
<img id="dustimage" src="images/dust.jpg" alt="Picutre of Dust">
</div>
<p>Cyclists are enthusiastic and very health and environmentally conscious. For this reason, all of our trips include vegan options for meals, recycled paper food serving utensils,
and hybrid vehicles to escort the cyclists.</p>
<p>Our trips are suitable for solo cyclists, couples, friends, and families. We provide camping accommodation for off-road cycling trips, and shared accommodations for couples, friends and families. If you are travelling solo, we can match you with someone for shared accommodations.
You can also pay the single-supplement if you wish to have a room of your own.</p>
<p>After you've completed one trip with us, we're sure you'll want to do more. Over 80% of our customers have been on at least one prior trip with us.
We're always looking for new ideas for trips, so please let us know if you have any ideas!</p>
</div>
<p id="bicycleimage"><img src="images/bicycles_sm.jpg" alt="An image of some bikes."><p>
<hr>
<p id="bottom_footer"><strong>Cycling Tours * P.O. Box 4455 * Brantford, ON * NET 2J0</strong><p>
</body>
</html>
<style type ="text/css">
header h1 {
display: inline;
font-size: 45px;
font-family: arial;
vertical-align: 90%;
margin: 30px;
}
header {
background-color: #bbccdd;
padding-bottom: 0px;
height: 121px;
}
.navmenu{
background-color: #bbccdd;
width: 8.8%;
height: 580px;
display:inline-block;
}
.navmenu hr {
border: 1px solid grey;
}
.navmenu ul {
margin-top: 0;
padding-left: 2px;
display:inline-block;
}
.navmenu li {
height: 35px;
padding-top: 30px;
padding-left: 10px;
font-family: arial;
color: grey;
display:inline-block;
}
.navmenu li a {
color: #888888;
text-decoration: none;
font-weight: bold;
}
.navmenu a:link {
color: #888888;
}
.paragraph {
width: 60%;
margin-left: 10%;
border-top: 0;
}
</style>
答案 0 :(得分：1)
我已经改变了你的html结构。请看看......
<!DOCTYPE html>
<html>
<head>
<!-- Author: Abdullahi Jama 0003 -->
<title>Cycling Tours</title>
<link rel="stylesheet" type="text/css" media="print" href="printstyles.css">
<link rel="stylesheet" type="text/css" href="aboutus.css">
</head>
<body>
<header>
<a href="about_us.html">
<img src="images/bicycle_axle_sm.jpg" alt="This is a picture of a axle">
</a>
<h1>Cycling Tours</h1>
</header>
<div class="navmenu">
<nav>
<ul>
<li><a href="aboutus.html">AboutUs</a>
</li>
<hr>
<li><a href="#">AskUs</a>
</li>
<hr>
<li><a href="#">Destinations</a>
</li>
<hr>
<li><a href="#">FAQ</a>
</li>
<hr>
<li><a href="#">Reviews</a>
</li>
<hr>
<li><a href="#">Seminars</a>
</li>
<hr>
<li><a href="#">Trip Prep</a>
</li>
<hr>
</ul>
</nav>
</div>
<div class="paragraph">
<h2>About Us</h2>
<p>Cycling Tours began when Bill Randolf and three of his friends from high school began to cycle regularly every weekend. Their routine cycling evolved into frequent cycling trips and they cultivated a following. Before they knew it, other friends and
family members asked to join them in their trips.</p>
<div id="dust_jpeg">
<img id="dustimage" src="images/dust.jpg" alt="Picutre of Dust">
</div>
<p>Cyclists are enthusiastic and very health and environmentally conscious. For this reason, all of our trips include vegan options for meals, recycled paper food serving utensils, and hybrid vehicles to escort the cyclists.</p>
<p>Our trips are suitable for solo cyclists, couples, friends, and families. We provide camping accommodation for off-road cycling trips, and shared accommodations for couples, friends and families. If you are travelling solo, we can match you with someone
for shared accommodations. You can also pay the single-supplement if you wish to have a room of your own.</p>
<p>After you've completed one trip with us, we're sure you'll want to do more. Over 80% of our customers have been on at least one prior trip with us. We're always looking for new ideas for trips, so please let us know if you have any ideas!</p>
<p id="bicycleimage">
<img src="images/bicycles_sm.jpg" alt="An image of some bikes.">
<p>
<hr>
<p id="bottom_footer"><strong>Cycling Tours * P.O. Box 4455 * Brantford, ON * NET 2J0</strong>
<p>
</div>
</body>
</html>
<style type="text/css">
header h1 {
display: inline;
font-size: 45px;
font-family: arial;
vertical-align: 90%;
margin: 30px;
}
header {
background-color: #bbccdd;
padding-bottom: 0px;
height: 121px;
}
.navmenu {
float: left;
background-color: #bbccdd;
min-width: 8.8%;
height: 580px;
display: inline-block;
}
.navmenu hr {
border: 1px solid grey;
}
.navmenu ul {
margin-top: 0;
padding-left: 2px;
display: inline-block;
}
.navmenu li {
height: 35px;
padding-top: 30px;
padding-left: 10px;
font-family: arial;
color: grey;
display: inline-block;
}
.navmenu li a {
color: #888888;
text-decoration: none;
font-weight: bold;
}
.navmenu a:link {
color: #888888;
}
.paragraph {
width: 90.2%;
margin-left: 10%;
border-top: 0;
}
</style>
答案 1 :(得分：0)
将侧边栏浮动到左侧
.navmenu {
float: left;
}