尝试将包含主页、菜单等的导航栏放在页面左侧，其余部分放在中间，windingroad.jpg float 到所有文本的右侧。我不知道如何将它们分成多列并继续，我们将不胜感激。
~HTML~
<head>
<meta charset="UTF-8">
<title>JavaJam Coffee House</title>
<link rel="stylesheet" type="text/css" href="javajam.css">
<style>
#nav {
background-color:#999;
width:100px;
padding-top: 10px;
font-weight: bold;
float:left; }
#nav a {text-decoration: none;
padding-bottom: 15px;
a:link; { color: #996633;}
a:visited { color: #ccaa66;}
a:hover { color: #330000;
}
#nav ul { list-style-type: none;}
</style>
</head>
<body>
<h1>
<img src="javalogo.gif" alt="JavaJam Coffee House"
width="619" height="117">
</h1>
<p>Follow the winding road to JavaJam...</p>
<div id="nav wrapper">
<ul class="nav">
<li><a href="index.html">Home</a></li>
<li><a href="menu.html">Menu</a></li>
<li><a href="music.html">Music</a></li>
<li><a href="">Jobs</a></li>
</ul>
</div>
<main>
<div id="wrapper">
<img src="windingroad.jpg" alt="Winding Road"
width="333" height="156" class="floatright">
</div>
<ul>
<li>Specialty Coffee and Tea</li>
<li>Bagels, Muffins, and Organic Snacks</li>
<li>Music and Poetry Readings</li>
<li>Open Mic Night</li>
</ul>
</main>
<p>
12312 Main Street<br>
Mountain Home, CA 93923<br>
1-888-555-5555
</p>
<footer>
<p>Copyright © 2014 Javajam Coffee House</p>
<p><a href="@college.edu">
a@college.edu</a>.</p>
</footer>
</body>
</html>
最佳答案
有很多方法可以实现这一点，但这里是一种方法:
body {
margin: 0;
padding: 0;
}
#navigation {
width: 200px;
position: fixed;
top: 0;
bottom: 0;
z-index: 1000;
overflow-y: auto;
background-color: gray;
}
#main {
margin-left: 200px;
padding: 5px;
}<div id="navigation">
<h1>
<img src="javalogo.gif" alt="JavaJam Coffee House" width="619" height="117">
</h1>
<p>Follow the winding road to JavaJam...</p>
<div>
<ul class="nav">
<li><a href="index.html">Home</a></li>
<li><a href="menu.html">Menu</a></li>
<li><a href="music.html">Music</a></li>
<li><a href="">Jobs</a></li>
</ul>
</div>
</div>
<div id="main">
<div>
<div id="wrapper">
<img src="windingroad.jpg" alt="Winding Road" width="333" height="156" class="floatright">
</div>
<ul>
<li>Specialty Coffee and Tea</li>
<li>Bagels, Muffins, and Organic Snacks</li>
<li>Music and Poetry Readings</li>
<li>Open Mic Night</li>
</ul>
</div>
<p>
12312 Main Street<br>
Mountain Home, CA 93923<br>
1-888-555-5555
</p>
<footer>
<p>Copyright © 2014 Javajam Coffee House</p>
<p><a href="@college.edu">a@college.edu</a>.</p>
</footer>
</div>将您的导航包装到一个容器中，将您的内容包装到另一个容器中，然后应用 css 将这两个容器分开，这样它就可以左右了。
此外，对于您的 css id 属性，它不能包含超过一个词，因为该值是唯一的。
关于html - 如何制作带有左侧导航的两栏页面？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30651808/