Html Div對齊問題

我在一個項目的博客上工作，我有一個計劃的特定佈局，頂部標題，左側導航，中間兩個部分（一個是文章，另一個是評論部分），以及右側的側欄（旁邊）。唯一的問題是側邊欄的上邊距與下邊的評論部分對齊，而不是頂部文章的部分。任何幫助將非常感激。Html Div對齊問題

這裏的的jsfiddle：http://jsfiddle.net/randomname14/nvu4qhcp/5/，也全屏結果（http://jsfiddle.net/randomname14/nvu4qhcp/5/embedded/result/）

而且下面的代碼（它是全身抱歉，但我不確定這可能是造成這個問題，所以我離開在大部分地區）

<body> 


<header> 

<a href="my page.html" style="font-size:500%; text-decoration: none;"> <span style="color: #FFFFFF">tech</span><span style="color: #DB4105;">news</span><span style="color: #FFFFFF">daily</span> </a> 

</header> 

<nav> 
<hr/> 
<b><a href="my page.html" style="color: #FFFFFF;">Home</a><br> 
<hr> 
Hardware<br> 
<hr/> 
Software<br> 
<hr/> 
Builds<br> 
<hr/> 
Games<br> 
<hr/> 
Pereipherals<br> 
<hr/> 
Other Stuff<br> 
<hr/> 
FAQ<br> 
<hr/> 
Contact Me<br> 
<hr/> 
</nav> 

<section> 

<h1 style="font-size: 200%"> Article Title </h1> 

<img src="amd-radeon-logo.jpg" width="1095" border="3px"> 
Article 
</p> 

</section> 

<section> 

<textarea rows="10" cols="101" placeholder="Like this article if you liked it, dislike it if you disliked it, or leave a comment down below if your thoughts are more complicated than this."></textarea> 

</section> 

<aside style=" color: #FFFFFF;"> 

<hr/> 
<hr/> 
<b> 
<a href="http://www.reddit.com" style="text-decoration:none"> 
<img src="Ad.png" width="416" border="3px"> 
</a> 
<p style=" color: #FFFFFF; font-size: 125%"><b> Buy a Shirt today! </b></p> 
<hr/> 
<p style=" color: #FFFFFF; font-size: 125%"><b> Older Articles </b></p> 
<img src="390.jpg" width="416" border="3px"> 
<p style=" color: #FFFFFF; font-size: 70%"><b> AMD R9 300 Series GPU Leaked in Photos with R9 295X2 Cooler Design. </b> </p> 
<img src="INTEL.jpg" width="416" border="3px"> 
<p style=" color: #FFFFFF; font-size: 70%"><b> 14nm Intel Core M Broadwell-Y Laptops Coming Soon. </b></p> 
<img src="W10.png" width="416" border="3px"> 
<p style=" color: #FFFFFF; font-size: 70%"><b> Microsoft Unveils the Next Version of Windows. Uh, I Think They Forgot a Number... </b></p> 
<img src="Ubisoft.jpg" width="416" border="3px"> 
<p style=" color: #FFFFFF; font-size: 70%"><b> Ubisoft Blames OEMs for AC: Unity Performance Issues, <i>Really?</i> </b></p> 
<img src="780TI.jpg" width="416" border="3px"> 
<p style=" color: #FFFFFF; font-size: 70%"><b> GeForce GTX 700 Series Price Drops After 900 Series Unveiling </b></p> 
<img src="GEFORCE.png" width="416" border="3px"> 
<p style=" color: #FFFFFF; font-size: 70%"><b> Nvidia Unveils 2nd Generation Maxwell GPUs, The GTX 900 Series. </b></p> 
<hr/> 
Social:<br> 
<br> 
<img src="TWITTER.png" width="30"> 
<a href="http://www.twitter.com" style="color : white">Twitter</a> 
<br> 
<img src="FACEBOOK.png" width="30"> 
<a href="http://www.facebook.com" style="color : white">Facebook</a> 
<br> 
<img src="YOUTUBE.png" width="30"> 
<a href="http://www.youtube.com" style="color : white">YouTube</a> 
<hr/> 
Top Channels:<br> 
<br> 
<img src="LINUS.jpg" width="30"> 
<a href="http://www.youtube.com/user/linustechtips/videos" style="color : white;">Linus</a> 
<br> 
<img src="TEK.jpg" width="30"> 
<a href="http://www.youtube.com/user/razethew0rld/videos" style="color : white;">Logan</a> 
<br> 
<hr/> 
PC Builder Resources: 
<br> 
<br> 
<ul> 
<li><a href="http://www.intel,com" style="color : white;">Intel</a></li> 
<li><a href="http://www.amd.com" style="color : white;">AMD</a></li> 
</ul> 
<hr/> 
<hr/> 
</b> 
</aside> 

<footer> © Name, 2000-2014, all rights reserved. </footer>

來源

2014-12-23 randomname14

你應該用http://validator.w3.org/，你的HTML包含了很多錯誤（未結束的標籤（img，a，li ...），b包含塊元素......） – yunandtidus

我嘗試使用html tidy清理它，並且測試它，它完全搞亂了佈局。還有關於錯誤，我對html相當陌生，大約在3-4個月前開始。 – randomname14

你需要把「文章」（的section元素）父容器內。

HTML：

<div class="main-content"> 
    <section> 
     <h1 ... content of section 1 ... </p> 
    </section> 
    <section> 
     <textarea ... content of section 2 ... </textarea> 
    </section> 
</div>

CSS：

.main-content { 
    width:1100px; 
    float: left; 
} 
section { 
    width:1100px; 
    /*float: left; **can remove float** */ 
    padding:10px; 
    ... 
}

DEMO (with reduced width for demonstration purposes)

來源

2014-12-23 05:47:44 JRulle

謝謝，它工作！ – randomname14

Html Div對齊問題

回答

相關問題