正如我的标题所述，我有一个网站，我试图分为三列。左边的第一列包含＆lt; NAV＆GT;栏和最大的列将是包含段落，图像等的中心内容区域......
然后，对于最右边的列，我需要它是＆lt;抛开＆GT;与其他列高度相同的元素，宽度与＆lt; NAV＆GT;该列约占含有大部分含量的柱的50％。我的问题是我根本不知道如何配置边距，填充等，以便获得这种类型的布局。到目前为止，我已尽力而为，但无法将旁边元素显示为列。这是我的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;}
答案 0 :(得分：1)
如果您希望3列高度相同，并且您可以使用supporting IE 10+，Flexbox可以实现此目的：https://codepen.io/pixleight/pen/RZgxYP/
#wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
-ms-flex-pack: distribute;
justify-content: space-around;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
header,
nav,
aside,
main,
footer {
margin: 16px;
padding: 16px;
/* outline just for visibility purposes */
outline: 1px solid #F0F;
}
header,
footer {
-webkit-box-flex: 100%;
-ms-flex: 100%;
flex: 100%;
}
nav,
aside {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
main {
-webkit-box-flex: 2;
-ms-flex: 2;
flex: 2;
}<div id="wrapper">
<header>
<h1>Header</h1>
</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>
<h2>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.</p>
<!-- truncated for brevity -->
</main>
<aside>
<h3>Aside</h3>
</aside>
<footer>
<small><i>Copyright © 2017 Juniper Lane Swim Club</i></small>
</footer>
</div>
答案 1 :(得分：1)
@pixleight的答案是我会采取的方法，但如果你不想使用flexbox，你可以简单地使用：
<?php
if(isset($_POST['email'])) {
// EDIT THE 2 LINES BELOW AS REQUIRED
$email_to = "";
$email_subject = "Your email subject line";
function died($error) {
// your error code can go here
echo "We are very sorry, but there were error(s) found with the form you submitted. ";
echo "These errors appear below.<br /><br />";
echo $error."<br /><br />";
echo "Please go back and fix these errors.<br /><br />";
die();
}
// validation expected data exists
if(!isset($_POST['first_name']) ||
!isset($_POST['last_name']) ||
!isset($_POST['email']) ||
!isset($_POST['telephone']) ||
!isset($_POST['comments'])) {
died('We are sorry, but there appears to be a problem with the form you submitted.');
}
$first_name = $_POST['first_name']; // required
$last_name = $_POST['last_name']; // required
$email_from = $_POST['email']; // required
$telephone = $_POST['telephone']; // not required
$comments = $_POST['comments']; // required
$error_message = "";
$email_exp = '/^[A-Za-z0-9._%-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/';
if(!preg_match($email_exp,$email_from)) {
$error_message .= 'The Email Address you entered does not appear to be valid.<br />';
}
$string_exp = "/^[A-Za-z .'-]+$/";
if(!preg_match($string_exp,$first_name)) {
$error_message .= 'The First Name you entered does not appear to be valid.<br />';
}
if(!preg_match($string_exp,$last_name)) {
$error_message .= 'The Last Name you entered does not appear to be valid.<br />';
}
if(strlen($comments) < 2) {
$error_message .= 'The Comments you entered do not appear to be valid.<br />';
}
if(strlen($error_message) > 0) {
died($error_message);
}
$email_message = "Form details below.\n\n";
function clean_string($string) {
$bad = array("content-type","bcc:","to:","cc:","href");
return str_replace($bad,"",$string);
}
$email_message .= "First Name: ".clean_string($first_name)."\n";
$email_message .= "Last Name: ".clean_string($last_name)."\n";
$email_message .= "Email: ".clean_string($email_from)."\n";
$email_message .= "Telephone: ".clean_string($telephone)."\n";
$email_message .= "Comments: ".clean_string($comments)."\n";
// create email headers
$headers = 'From: '.$email_from."\r\n".
'Reply-To: '.$email_from."\r\n" .
'X-Mailer: PHP/' . phpversion();
@mail($email_to, $email_subject, $email_message, $headers);
?>
Thank you for contacting us. We will be in touch with you very soon.
<?php
}
?>
您可以在此处查看：https://jsfiddle.net/1jnnyb4d/
我注意到有关您的代码的一些注意事项： 1）你的主要元素上有一个丢失的“h1”结束标记（我认为应该是h2）和页脚上丢失的“a”结束标记; 2）颜色：#blue;不是有效的CSS指令（要么只使用“蓝色”或HEX值）。