-1
正如我的標題所述，我有一個網站，我試圖將其劃分爲三欄。左邊的第一列將包含< nav>欄，最大的列將是包含段落，圖像等的中心內容區域...如何使<aside>作爲包含內容的列功能
然後，對於最右邊一列，我需要它是一個<預留「>與其他列高度相同的元素，其寬度與包含大部分內容的列的大約50％的nav38列相同。我的問題是我只是不知道如何配置邊距，填充等，以獲得這種類型的佈局。到目前爲止，我已經盡了最大的努力，但無法讓旁邊的元素顯示爲列。這是我的HTML：
<!DOCTYPE html>
<html>
<head>
<title>Juniper Lane Swimming Club Inc., Bridgewater, NJ 08807</TITLE>
<meta charset="utf-8">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<header>
<img src="header.jpg" alt="header">
</header>
<nav>
<ul>
<li><a href="http://www.jlsc.org">Home</a></li>
<li><a href="pool-info.htm">Pool Information</a></li>
<li><a href="news-events.htm">News & Events</a></li>
<li><a href="swim-team.htm">Swim Team</a></li>
<li><a href="swim-lessons.htm">Swim Lessons</a></li>
<li><a href="jlsc-board.htm">JLSC Board </a></li>
<li><a href="photo-gallery.htm">Photo Galleries</a></li>
<li><a href="links-htm.htm">Useful Information</a></li>
</ul>
</nav>
<main>
<img src="hp-1.jpg" id="hp1" alt="pool" width="241" height="172"><h2 style="color: blue;">Welcome to Juniper Lane Swim Club!</h1>
<p>Juniper Lane is the neighborhood club where family fun is #1!</p>
<p>Whether you're looking for a place to take the kids, swim a few laps <br>
to stay in shape or just relax on a lounge chair with a good book - Juniper Lane is the place for you.<br>
</p>
<p> </p>
<img src="hp-3.jpg" id="hp3" alt="bench" width="237" height="172">
<p class="greebtext">About Us - </p>
<p>The Juniper Lane Swim Club is a member owned non-profit, private swimming club located in Bridgewater, NJ.</p>
<p>The club was established in 1955 but the facility has been renovated and well-maintained over the years</p>
<img src="hp-2.jpg" id="hp2" alt="poolslide" width="237" height="172"><br>
<p>We maintain a membership of 180 families strong. Although we are currently at our maximum, we maintain a waiting list of families who are interested in joining the club. We are typically able to accomodate a number of new families each year through normal attrition. If you are interested in a JLSC membership or information please send an email to
<!-- Start email -->
<script type="text/javascript"
src="http://www.jlsc.org/code/java/email/email.js"></script>
<!-- End email -->.</p>
<p>We are located on Juniper Lane in Bridgewater Township, just
off Country Club Rd about 1mi north of Garretson Rd.</p>
</main>
<footer>
<small><i>Copyright © 2017 Juniper Lane Swim Club</i></small>
<small></a></small>
</footer>
</div>
</body>
</html>
And Here is the CSS:
Body {
margin:auto;
padding:0px;
background-color:#59b3d2;
background-repeat: repeat;
background-position: top center;
font-family: Verdana, Geneva, sans-serif;
font-size:13px;
padding-left: 5px;
text-align: center;
background-image: url("pool-water.jpg");
}
.redbtext {
color: #a90000;
font-weight:bold;
}
.greebtext {
color: #39780a;
font-weight:bold;
font-size:14px;
}
.greebbullet {
color: #39780a;
font-size:13px;
}
.bluetext {
color: #013370;
font-weight:bold;
font-size:15px;
}
nav {float: left;
width: 190px;
padding: 10px;
background-color: #ffff80;
}
nav a {text-decoration: none;
font-size: 1.5em;}
nav a:link {color:#blue;}
nav a:hover {color: orange;}
nav a:visited {color:#002266;}
li {list-style-type: none;}
main {margin-left: 210px;
background-color:#ffffcc;
height: 100%;
font-size: 1.1em;
color: grey;
padding-right: 200px;
}
#wrapper {width: 967px;
margin-left: auto;
margin-right: auto;
background-color: #ffff80;
overflow: hidden;
}
footer {text-align: center;
padding: 20px;
}
#hp1, #hp2, #hp3 {border: 10px solid white;
float:right;}
歡迎來到SO！ [參觀]（https://stackoverflow.com/tour），瞭解如何提出最有可能爲您提供幫助的問題。在你的情況下，我們需要查看你的style.css文件，看看你到目前爲止已經做了什麼，以及你可以改變什麼來解決你的問題。我們只需要與定義列相關的CSS，而不是您網站的所有樣式。 – cjl750