如何将内容部分置顶？

我尝试布局我的html页面，并获取顶部右侧的内容部分。如何将内容部分置顶？

随着：

浮动：右; >>内容部分向右移动，但不在页面顶部。

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>

来源

2016-12-24 Makhlo

在HTML中，代码中的第一个代码在页面中更高。那么为什么你要把内容放在最底层呢？ –

我建议你尽量避免使用'float'和'position：absolute'来进行布局，因为这两者都不是。这只会给你带来很多麻烦。 – LGSon

添加位置到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>

来源

2016-12-24 15:25:32

非常感谢您的快速回复，您的解释和正确的答案。 – Makhlo

欢迎您。如果上面的代码段正在为您工作，那么您可以接受我的答案... –

<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>

移形式上面的内容部分，并添加浮动适合你想要的视觉效果的类型。

这将有效地对齐内容部分的权利，因为它会高于其他内容，它会自动在右上角。

来源

2016-12-24 15:23:50 Krash

非常感谢您的快速回应，您的解释和正确的答案。 – Makhlo

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

转乘section和nav也将解决你的问题。

来源

2016-12-24 15:28:47 Jay

非常感谢您的快速响应，您的解释和正确的答案。 – Makhlo

请将您的内容部分放在您的表格上方，并为内容设置css float:right;
并且这会将您的内容放到正确的位置，并且下面的表格将会移到上方。

来源

2016-12-24 15:30:38

里面的html code.here您的问题可以通过改变简单地加以解决，以略低于形式＃在导航的顶部接触您节＃内容的位置的元素定位是非常重要的。

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; 
 
}

<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>

来源

2016-12-24 15:36:24

你也可以使用flex（而电网开始出现）和order到..重新排序网格:)

例如：

/* 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; 
 
}

<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>

来源

2016-12-24 15:57:00

右.... + 1 ...相同的技巧，2种不同的解决方案:) – LGSon

如何将内容部分置顶？

回答

相关问题