Question

我尝试布局我的html页面并将内容部分放在最右边。

使用：

float：right; ＆gt;＆gt;内容部分向右移动，但不在页面顶部。

float：top; ＆gt;＆gt;内容部分向左移动。

请参见截图以获取插图！

    form.contact{
      margin: 1% 1.5%;
      padding: 5px;
      border-style: solid;
      width: 37.5%;
      hight: auto;
    }
    #content{
      float: right;
      padding: 10px;
      border:1px solid red;
      width: 50%;
      hight: auto;
    }
    form {
      float: left;
      margin: 1% 1.5%;
      width: 63%;
    }
    nav{
      float: left;
      margin: 0 1.5%;
      width: 63%;
    }
    footer{
      float: left;
      margin: 1% 1.5%;
      width: 37.5%;
      border-style: solid;
    }

        <form class="contact">
          <label>Contact</label></br></br>
          First name:
          <input type="text" name="firstname" value="Your name please?">
          <br><br>
          Email:
          <input type="text" name="lastname" value="Your email please?">
          <br><br>
          <input type="submit" value="Press the button">
        </form>
        <nav>
           <a href = #>Just Me</a><br>
           <a href = #>Portfolio</a>
        </nav>
        <section id = "content"><h2><strong>Content section</strong></h2></section>
        <footer>
          <label>Socializing</label>
        </footer>

Answer 1

<html>
<head>
<title>title</title>
</head>

<body>
    <section id="content" style="float:right;"><h2><strong>Content section</strong></h2></section>
    <form class="contact">
      <label>Contact</label></br></br>
      First name:
      <input type="text" name="firstname" value="Your name please?">
      <br><br>
      Email:
      <input type="text" name="lastname" value="Your email please?">
      <br><br>
      <input type="submit" value="Press the button">
    </form>
    <nav>
       <a href = #>Just Me</a><br>
       <a href = #>Portfolio</a>
    </nav>
    <footer>
      <label>Socializing</label>
    </footer>
  </body>
 </body>
</html>

将内容部分移到表单上方，并为所需的视觉效果类型添加浮动。

这样可以有效地将内容部分与右侧对齐，因为它将高于其他内容，它将自动位于右上角。

Answer 2

向div#content添加位置也可以使内容正确....

body {
  position: relative;
}
form.contact {
  margin: 1% 1.5%;
  padding: 5px;
  border-style: solid;
  width: 37.5%;
  hight: auto;
}
#content {
  border: 1px solid red;
  display: block;
  float: right;
  padding: 10px;
  position: absolute;
  right: 10px;
  top: 10px;
  width: 50%;
}
form {
  float: left;
  margin: 1% 1.5%;
  width: 63%;
}
nav {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
footer {
  float: left;
  margin: 1% 1.5%;
  width: 37.5%;
  border-style: solid;
}

<html>

<head>
  <title>title</title>
</head>

<body>
  <form class="contact">
    <label>Contact</label>
    </br>
    </br>
    First name:
    <input type="text" name="firstname" value="Your name please?">
    <br>
    <br>Email:
    <input type="text" name="lastname" value="Your email please?">
    <br>
    <br>
    <input type="submit" value="Press the button">
  </form>
  <nav>
    <a href=#>Just Me</a>
    <br>
    <a href=#>Portfolio</a>
  </nav>
  <section id="content">
    <h2><strong>Content section</strong></h2>
  </section>
  <footer>
    <label>Socializing</label>
  </footer>
</body>

</html>

Answer 3

<section id = "content"><h2><strong>Content section</strong></h2></section>
    <nav>
       <a href = #>Just Me</a><br>
       <a href = #>Portfolio</a>
    </nav>

交换section和nav也可以解决您的问题。

Answer 4

请将您的内容部分放在表单上方，并为内容float:right;设置CSS，这将使您的内容正确，并且此下方的表单将移至上方。

Answer 5

你也可以使用flex（当网格开始出现时）和order来重新排序你的网格：）

示例：

＆＃13;

/* FLEX UPDATE*/
body {
  display:flex;
  flex-wrap:wrap;
  }
#content{
  order:-1;
  }
form {
  order:-2
    }
/*END  FLEX UPDATE*/
form.contact {
  margin: 1% 1.5%;
  padding: 5px;
  border-style: solid;
  width: 37.5%;
  hight: auto;
}
#content {
  float: right;
  padding: 10px;
  border: 1px solid red;
  width: 50%;
  hight: auto;
}
form {
  float: left;
  margin: 1% 1.5%;
  width: 63%;
}
nav {
  float: left;
  margin: 0 1.5%;
  width: 63%;
}
footer {
  float: left;
  margin: 1% 1.5%;
  width: 37.5%;
  border-style: solid;
}

＆＃13;

<form class="contact">
  <label>Contact</label>
  </br>
  </br>
  First name:
  <input type="text" name="firstname" value="Your name please?">
  <br>
  <br>Email:
  <input type="text" name="lastname" value="Your email please?">
  <br>
  <br>
  <input type="submit" value="Press the button">
</form>
<nav>
  <a href=#>Just Me</a>
  <br>
  <a href=#>Portfolio</a>
</nav>
<section id="content">
  <h2><strong>Content section</strong></h2>
</section>
<footer>
  <label>Socializing</label>
</footer>

＆＃13;

Answer 6

将元素放在html代码中是非常重要的。通过将部分#content 的位置更改为表单#contact 在导航的顶部。

＆＃13;
＆＃13;
form.contact{ margin: 1% 1.5%; padding: 5px; border-style: solid; width: 37.5%; height: auto; float:left; } #content{ float: right; padding: 10px; border:1px solid red; width: 50%; height: auto; } form { float: left; margin: 1% 1.5%; width: 63%; } nav{ float: left; margin: 0 1.5%; width: 63%; } footer{ float: left; margin: 1% 1.5%; width: 37.5%; border-style: solid; }
＆＃13;
<html> <head> <title>title</title> </head> <body> <form class="contact"> <label>Contact</label><br/><br/> First name: <input type="text" name="firstname" value="Your name please?"> <br><br> Email: <input type="text" name="lastname" value="Your email please?"> <br><br> <input type="submit" value="Press the button"> </form> <section id = "content"><h2><strong>Content section</strong></h2></section> <nav> <a href = #>Just Me</a><br> <a href = #>Portfolio</a> </nav> <footer> <label>Socializing</label> </footer> </body> </body> </html>
＆＃13;
＆＃13;
＆＃13;

如何将内容部分放在首位？

6 个答案: