Question

我的网站位于Vivascoaching，主页仍然不完整，因为我正在处理要添加的内容，但如果您将鼠标悬停在我们身上并点击与我们的教练会面，您将看到我的意思。我的联系表格出现在所有教练信息的下方，我希望它在右边的旁边。即使我将它们各自的列向左浮动，我也似乎无法使其工作。有人可以帮帮我吗？我还添加了HTML和CSS snipets以防万一：

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>&copy;VivasCoaching 2016</p>
</footer>

</body>
</html>

我还在网站上添加了一些查询，试图让它在手机和平板电脑上看起来也不错。我今天刚刚了解了查询。你们有什么想法或推荐的？

Answer 1

只需将样式添加到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>

Answer 2

首先，你在你的HTML代码中使用id，在css文件中你有类。

开始将id =“middle_column”更改为class =“middle_column”等

Answer 3

如果您希望内容并排放置并希望它能够对移动设备做出响应，那么您一定要使用引导框架。我使用下面的代码并删除了所有的CSS和标题内容，并能够得到你想要的东西。

<!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>&copy;VivasCoaching 2016</p>
</footer>

</body>
</html>

我似乎无法将我的右栏浮动到我页面的右侧

3 个答案: