如何將內容部分置頂？

我嘗試佈局我的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

如何將內容部分置頂？

回答

相關問題