我似乎无法将右列浮动到页面右侧
I can't seem to float my right column to the right of my page
我的网站在 Vivascoaching 上，主页仍然不完整，因为我正在处理要添加的内容，但是如果您将鼠标悬停在关于我们的地方并单击与我们的教练会面，您就会明白我的意思。我的联系表出现在所有教练信息的下方，我希望它位于右侧的旁边。即使我将它们各自的列都浮动到左侧，我似乎也无法让它工作。有人可以帮帮我吗？我还添加了 HTML 和 CSS 片段以防万一：
header{
margin: 0px auto;
background-color: white;
border-bottom-style: solid;
}
body{
font-family: "Comic Sans MS", sans-serif;
}
h1,h2,h3{
color: #0f43f0;
}
a:link {
color: #0f43f0;
text-decoration: none;
font-size: 120%;
}
a:visited{
color: #0f43f0;
}
img {
max-width: 100%;
}
footer{
clear: both;
text-align: center;
background-color: white;
border-top-style: solid;
width: auto;
}
footer p{
margin-top: 10px;
color: #0f43f0;
}
/*----------------DROP DOWN STYLING-----------*/
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: #0f43f0;
color: white;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
/*-------NAV STYLING------------*/
#mainlinks li{
float:left;
margin-left: 80px;
}
/*---------- COLUMN STYLING ----------*/
.linkswrapper{
color: #0f43f0;
}
#container {
width: 960px;
margin: 0 auto;
overflow: auto;
}
.middle_column{
float:left;
text-align:center;
width:700px;
padding:10px;
margin-left: 30px;
}
.right_column{
float: left;
text-align:center;
width:260px;
margin-left: 70px;
overflow: visible;
}
/*---------- Media Queries for Responsive design --------------*/
@media screen and (max-width:959px) {
#container{
width:100%;
}
}
@media screen and (max-width:640px){
#container{
width:100%;
}
img {
max-width:100%;
}
}
@media screen and (max-width:480px){
#container{
width:100%;
}
}
<!DOCTYPE HTML>
<html>
<head>
<title>Vivas Coaching-Main</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../style/main.css">
<link rel="stylesheet" href="../style/normalize.css">
</head>
<body>
<header>
<a href="index.html"><img src="Images/logo.png" alt="logo" style=" width: 465; height: 135; margin-left: 10px;"></a>
</header>
<div class="linkswrapper">
<nav id="mainlinks">
<ul>
<li><a class="active" href="index.html" title="Main">Main</a></li>
<li class="dropdown">
<a href="aboutus.html" class="dropbtn" title="About Us">About Us</a>
<div class="dropdown-content">
<a href="meetourcoaches.html">Meet Our Coaches</a>
<a href="visionandvalues.html">Vision and Values</a>
</div>
</li>
<li class="dropdown">
<a href="courses.html" title="Courses">Courses</a>
<div class="dropdown-content">
<a href="satprep.html">SAT Prep</a>
<a href="actprep.html">ACT Prep</a>
<a href="subjecttutoring.html">Subject Tutoring</a>
<a href="summercamp.html">Summer Camp</a>
<a href="satactwinterbootcamp.html">SAT/ACT Winter Boot Camp</a>
</div>
</li>
<li><a href="register.html" title="Register">Register</a></li>
</ul>
</nav>
</div>
<div id="container">
<div id="middle_column">
<img src="Images/elaine.png" alt="Elaine">
<h1><i><u>Lead Coach Elaine Aguasvivas</u></i></h1>
<p>Coach Elaine earned a Bachelor of Arts in Economics from William Smith College. Because of her Economics background, she has had the opportunity to intern in places such as the United States State Department and the International Trade Commission both in Washington, DC. Professionally, Coach Elaine has 3+ years of experience as a College Adviser directly assisting students plan for and apply to college. As a full-time SAT Prep Coach, her passion is to prepare college minded students to achieve their highest potential scores in tests such as the SAT and the ACT.</p>
<p>Coach Elaine has successfully prepared students for SAT / ACT / SSAT tests as a profession for over two years now. It is her passion to motivate and equip students to achieve their highest possible score. On average, her students increase 250 points, with her highest increase at 410 points. What sets her apart is her ability not only to tutor but to coach her students.</p>
<p><i>"These are intimidating tests and students should receive all the support they need to overcome shortcomings and combat test anxiety. My goal with every student is to instill confidence in them through the mastery of best strategies"</i>- Coach Elaine</p>
<p>On Sundays, you can always find her at Blueprints Church in Wellington as she is one of its founding members. She serves actively as a Youth Leader mentoring young adults in her church.</p>
</div>
<aside id="right_column">
<h2>Contact Us</h2>
<p>(646)316-8481/<br>(403)718-0159</p>
<p>Please fill out the information below and we will get back to you as soon as possible!<p>
<form method="post" action="callback.php">
<label for="firstname">First Name: </label>
<input name="firstname" id="firstname" type="text" />
<label for="lastname">Last Name: </label>
<input name="lastname" id="lastname" type="text" />
<label for="email">Email: <span class="required"></span></label>
<input name="email" id="email" type="text" />
<label for="phonenumber">Phone Number:</label>
<input name="phonenumber" id="phonenumber" type="text"/>
<label>*What is 2+2? (Anti-spam)</label>
<input name="human" placeholder="Type answer here">
<label for="message"> Message: <span class="required"></span></label>
<textarea id="message" name="message" cols="25" rows="10" placeholder="Type your message here!"></textarea>
<input type="submit" id="submit"/>
</form>
</aside>
</div>
<footer>
<p>©VivasCoaching 2016</p>
</footer>
</body>
</html>
我还向网站添加了一些查询，以尝试让它在手机和平板电脑上看起来也不错。我今天才知道查询。大家有什么看法或建议？
只需将这里添加的样式添加到您的 div 中，您就会得到它
<div id="middle_column" style=" width: 45%; ">
<img src="Images/elaine.png" alt="Elaine">
<h1 style=""><i><u>Lead Coach Elaine Aguasvivas</u></i></h1>
<p>Your text here</p>
<div id="right_column" style="float: right; width: 48%;position: relative;
margin-top: -800px;
">
<h2>Contact Us</h2>
<p>(646)316-8481/<br>(403)718-0159</p>
<p>Please fill out the information below and we will get back to you as soon as possible!</p><p>
</p><form method="post" action="callback.php">
<label for="firstname">First Name: </label>
<input name="firstname" id="firstname" type="text">
<label for="lastname">Last Name: </label>
<input name="lastname" id="lastname" type="text">
<label for="email">Email: <span class="required"></span></label>
<input name="email" id="email" type="text">
<label for="phonenumber">Phone Number:</label>
<input name="phonenumber" id="phonenumber" type="text">
<label>*What is 2+2? (Anti-spam)</label>
<input name="human" placeholder="Type answer here">
<label for="message"> Message: <span class="required"></span></label>
<textarea id="message" name="message" cols="25" rows="10" placeholder="Type your message here!"></textarea>
<input type="submit" id="submit">
</form>
首先，您在 html 代码中使用了 id，并且在 css 文件中您有 classes.
开始 将 id="middle_column" 更改为 class="middle_column" 等
如果您希望内容并排放置并且希望它对移动设备具有响应能力，那么您绝对应该使用 bootstrap 框架。我使用了下面的代码并删除了所有 css 和 header 内容，并且能够得到您要查找的内容。
<!DOCTYPE HTML>
<html>
<head>
<title>Vivas Coaching-Main</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../style/main.css">
<link rel="stylesheet" href="../style/normalize.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">.
<div >
<img src="http://vivascoaching.com/Images/elaine.png" alt="Elaine">
<h1><i><u>Lead Coach Elaine Aguasvivas</u></i></h1>
<p>Coach Elaine earned a Bachelor of Arts in Economics from William Smith College. Because of her Economics background, she has had the opportunity to intern in places such as the United States State Department and the International Trade Commission both in Washington, DC. Professionally, Coach Elaine has 3+ years of experience as a College Adviser directly assisting students plan for and apply to college. As a full-time SAT Prep Coach, her passion is to prepare college minded students to achieve their highest potential scores in tests such as the SAT and the ACT.</p>
<p>Coach Elaine has successfully prepared students for SAT / ACT / SSAT tests as a profession for over two years now. It is her passion to motivate and equip students to achieve their highest possible score. On average, her students increase 250 points, with her highest increase at 410 points. What sets her apart is her ability not only to tutor but to coach her students.</p>
<p><i>"These are intimidating tests and students should receive all the support they need to overcome shortcomings and combat test anxiety. My goal with every student is to instill confidence in them through the mastery of best strategies"</i>- Coach Elaine</p>
<p>On Sundays, you can always find her at Blueprints Church in Wellington as she is one of its founding members. She serves actively as a Youth Leader mentoring young adults in her church.</p>
</div>
</div>
<!-- first column -->
<div class="col-md-6">.
<aside>
<h2>Contact Us</h2>
<p>(646)316-8481/<br>(403)718-0159</p>
<p>Please fill out the information below and we will get back to you as soon as possible!<p>
<form method="post" action="callback.php">
<label for="firstname">First Name: </label>
<input name="firstname" id="firstname" type="text" /><br>
<label for="lastname">Last Name: </label>
<input name="lastname" id="lastname" type="text" /><br>
<label for="email">Email: <span class="required"></span></label>
<input name="email" id="email" type="text" /><br>
<label for="phonenumber">Phone Number:</label>
<input name="phonenumber" id="phonenumber" type="text"/><br>
<label>*What is 2+2? (Anti-spam)</label>
<input name="human" placeholder="Type answer here"><br>
<label for="message"> Message: <span class="required"></span></label><br>
<textarea id="message" name="message" cols="25" rows="10" placeholder="Type your message here!"></textarea><br>
<input type="submit" id="submit"/>
</form>
</aside>
</div>
</div>
<!-- second column -->
</div>
</div>
<!-- row -->
<!-- container -->
<footer>
<p>©VivasCoaching 2016</p>
</footer>
</body>
</html>
我的网站在 Vivascoaching 上，主页仍然不完整，因为我正在处理要添加的内容，但是如果您将鼠标悬停在关于我们的地方并单击与我们的教练会面，您就会明白我的意思。我的联系表出现在所有教练信息的下方，我希望它位于右侧的旁边。即使我将它们各自的列都浮动到左侧，我似乎也无法让它工作。有人可以帮帮我吗？我还添加了 HTML 和 CSS 片段以防万一：
header{
margin: 0px auto;
background-color: white;
border-bottom-style: solid;
}
body{
font-family: "Comic Sans MS", sans-serif;
}
h1,h2,h3{
color: #0f43f0;
}
a:link {
color: #0f43f0;
text-decoration: none;
font-size: 120%;
}
a:visited{
color: #0f43f0;
}
img {
max-width: 100%;
}
footer{
clear: both;
text-align: center;
background-color: white;
border-top-style: solid;
width: auto;
}
footer p{
margin-top: 10px;
color: #0f43f0;
}
/*----------------DROP DOWN STYLING-----------*/
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: #0f43f0;
color: white;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
/*-------NAV STYLING------------*/
#mainlinks li{
float:left;
margin-left: 80px;
}
/*---------- COLUMN STYLING ----------*/
.linkswrapper{
color: #0f43f0;
}
#container {
width: 960px;
margin: 0 auto;
overflow: auto;
}
.middle_column{
float:left;
text-align:center;
width:700px;
padding:10px;
margin-left: 30px;
}
.right_column{
float: left;
text-align:center;
width:260px;
margin-left: 70px;
overflow: visible;
}
/*---------- Media Queries for Responsive design --------------*/
@media screen and (max-width:959px) {
#container{
width:100%;
}
}
@media screen and (max-width:640px){
#container{
width:100%;
}
img {
max-width:100%;
}
}
@media screen and (max-width:480px){
#container{
width:100%;
}
}
<!DOCTYPE HTML>
<html>
<head>
<title>Vivas Coaching-Main</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../style/main.css">
<link rel="stylesheet" href="../style/normalize.css">
</head>
<body>
<header>
<a href="index.html"><img src="Images/logo.png" alt="logo" style=" width: 465; height: 135; margin-left: 10px;"></a>
</header>
<div class="linkswrapper">
<nav id="mainlinks">
<ul>
<li><a class="active" href="index.html" title="Main">Main</a></li>
<li class="dropdown">
<a href="aboutus.html" class="dropbtn" title="About Us">About Us</a>
<div class="dropdown-content">
<a href="meetourcoaches.html">Meet Our Coaches</a>
<a href="visionandvalues.html">Vision and Values</a>
</div>
</li>
<li class="dropdown">
<a href="courses.html" title="Courses">Courses</a>
<div class="dropdown-content">
<a href="satprep.html">SAT Prep</a>
<a href="actprep.html">ACT Prep</a>
<a href="subjecttutoring.html">Subject Tutoring</a>
<a href="summercamp.html">Summer Camp</a>
<a href="satactwinterbootcamp.html">SAT/ACT Winter Boot Camp</a>
</div>
</li>
<li><a href="register.html" title="Register">Register</a></li>
</ul>
</nav>
</div>
<div id="container">
<div id="middle_column">
<img src="Images/elaine.png" alt="Elaine">
<h1><i><u>Lead Coach Elaine Aguasvivas</u></i></h1>
<p>Coach Elaine earned a Bachelor of Arts in Economics from William Smith College. Because of her Economics background, she has had the opportunity to intern in places such as the United States State Department and the International Trade Commission both in Washington, DC. Professionally, Coach Elaine has 3+ years of experience as a College Adviser directly assisting students plan for and apply to college. As a full-time SAT Prep Coach, her passion is to prepare college minded students to achieve their highest potential scores in tests such as the SAT and the ACT.</p>
<p>Coach Elaine has successfully prepared students for SAT / ACT / SSAT tests as a profession for over two years now. It is her passion to motivate and equip students to achieve their highest possible score. On average, her students increase 250 points, with her highest increase at 410 points. What sets her apart is her ability not only to tutor but to coach her students.</p>
<p><i>"These are intimidating tests and students should receive all the support they need to overcome shortcomings and combat test anxiety. My goal with every student is to instill confidence in them through the mastery of best strategies"</i>- Coach Elaine</p>
<p>On Sundays, you can always find her at Blueprints Church in Wellington as she is one of its founding members. She serves actively as a Youth Leader mentoring young adults in her church.</p>
</div>
<aside id="right_column">
<h2>Contact Us</h2>
<p>(646)316-8481/<br>(403)718-0159</p>
<p>Please fill out the information below and we will get back to you as soon as possible!<p>
<form method="post" action="callback.php">
<label for="firstname">First Name: </label>
<input name="firstname" id="firstname" type="text" />
<label for="lastname">Last Name: </label>
<input name="lastname" id="lastname" type="text" />
<label for="email">Email: <span class="required"></span></label>
<input name="email" id="email" type="text" />
<label for="phonenumber">Phone Number:</label>
<input name="phonenumber" id="phonenumber" type="text"/>
<label>*What is 2+2? (Anti-spam)</label>
<input name="human" placeholder="Type answer here">
<label for="message"> Message: <span class="required"></span></label>
<textarea id="message" name="message" cols="25" rows="10" placeholder="Type your message here!"></textarea>
<input type="submit" id="submit"/>
</form>
</aside>
</div>
<footer>
<p>©VivasCoaching 2016</p>
</footer>
</body>
</html>
我还向网站添加了一些查询，以尝试让它在手机和平板电脑上看起来也不错。我今天才知道查询。大家有什么看法或建议？
只需将这里添加的样式添加到您的 div 中，您就会得到它
<div id="middle_column" style=" width: 45%; ">
<img src="Images/elaine.png" alt="Elaine">
<h1 style=""><i><u>Lead Coach Elaine Aguasvivas</u></i></h1>
<p>Your text here</p>
<div id="right_column" style="float: right; width: 48%;position: relative;
margin-top: -800px;
">
<h2>Contact Us</h2>
<p>(646)316-8481/<br>(403)718-0159</p>
<p>Please fill out the information below and we will get back to you as soon as possible!</p><p>
</p><form method="post" action="callback.php">
<label for="firstname">First Name: </label>
<input name="firstname" id="firstname" type="text">
<label for="lastname">Last Name: </label>
<input name="lastname" id="lastname" type="text">
<label for="email">Email: <span class="required"></span></label>
<input name="email" id="email" type="text">
<label for="phonenumber">Phone Number:</label>
<input name="phonenumber" id="phonenumber" type="text">
<label>*What is 2+2? (Anti-spam)</label>
<input name="human" placeholder="Type answer here">
<label for="message"> Message: <span class="required"></span></label>
<textarea id="message" name="message" cols="25" rows="10" placeholder="Type your message here!"></textarea>
<input type="submit" id="submit">
</form>
首先，您在 html 代码中使用了 id，并且在 css 文件中您有 classes.
开始 将 id="middle_column" 更改为 class="middle_column" 等
如果您希望内容并排放置并且希望它对移动设备具有响应能力，那么您绝对应该使用 bootstrap 框架。我使用了下面的代码并删除了所有 css 和 header 内容，并且能够得到您要查找的内容。
<!DOCTYPE HTML>
<html>
<head>
<title>Vivas Coaching-Main</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../style/main.css">
<link rel="stylesheet" href="../style/normalize.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">.
<div >
<img src="http://vivascoaching.com/Images/elaine.png" alt="Elaine">
<h1><i><u>Lead Coach Elaine Aguasvivas</u></i></h1>
<p>Coach Elaine earned a Bachelor of Arts in Economics from William Smith College. Because of her Economics background, she has had the opportunity to intern in places such as the United States State Department and the International Trade Commission both in Washington, DC. Professionally, Coach Elaine has 3+ years of experience as a College Adviser directly assisting students plan for and apply to college. As a full-time SAT Prep Coach, her passion is to prepare college minded students to achieve their highest potential scores in tests such as the SAT and the ACT.</p>
<p>Coach Elaine has successfully prepared students for SAT / ACT / SSAT tests as a profession for over two years now. It is her passion to motivate and equip students to achieve their highest possible score. On average, her students increase 250 points, with her highest increase at 410 points. What sets her apart is her ability not only to tutor but to coach her students.</p>
<p><i>"These are intimidating tests and students should receive all the support they need to overcome shortcomings and combat test anxiety. My goal with every student is to instill confidence in them through the mastery of best strategies"</i>- Coach Elaine</p>
<p>On Sundays, you can always find her at Blueprints Church in Wellington as she is one of its founding members. She serves actively as a Youth Leader mentoring young adults in her church.</p>
</div>
</div>
<!-- first column -->
<div class="col-md-6">.
<aside>
<h2>Contact Us</h2>
<p>(646)316-8481/<br>(403)718-0159</p>
<p>Please fill out the information below and we will get back to you as soon as possible!<p>
<form method="post" action="callback.php">
<label for="firstname">First Name: </label>
<input name="firstname" id="firstname" type="text" /><br>
<label for="lastname">Last Name: </label>
<input name="lastname" id="lastname" type="text" /><br>
<label for="email">Email: <span class="required"></span></label>
<input name="email" id="email" type="text" /><br>
<label for="phonenumber">Phone Number:</label>
<input name="phonenumber" id="phonenumber" type="text"/><br>
<label>*What is 2+2? (Anti-spam)</label>
<input name="human" placeholder="Type answer here"><br>
<label for="message"> Message: <span class="required"></span></label><br>
<textarea id="message" name="message" cols="25" rows="10" placeholder="Type your message here!"></textarea><br>
<input type="submit" id="submit"/>
</form>
</aside>
</div>
</div>
<!-- second column -->
</div>
</div>
<!-- row -->
<!-- container -->
<footer>
<p>©VivasCoaching 2016</p>
</footer>
</body>
</html>
