html - 如何让内容部分置顶？-6ren

html - 如何让内容部分置顶？

转载作者：太空宇宙更新时间：2023-11-03 19:49:11

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

与:

float: right;>> 内容部分向右移动，但不在页面顶部。

float: top;>> 内容部分向左移动。

请参阅屏幕截图以获取说明!

    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>

最佳答案

在div#content中添加position也可以让内容向右走....

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>

关于html - 如何让内容部分置顶？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41314468/

文章推荐： python - 如何为 subreddit 构建网页抓取功能？

文章推荐： Bash 从文件中读取并存储到 MATLAB 中的变量

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 如何让内容部分置顶？