我尝试布局我的 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/