HTML錯誤：顯示內聯塊，而不是內聯？

Question

我正在努力爲我的學校創建一個網站，並且我正在努力獲得一個有內容區域和側邊欄的區域。正如你在這裏看到的：lrch.harrisonbh.com，我希望「標題1」的頂部與「側邊欄」的頂部相匹配。我把CSS上的jsfiddle這裏：http://jsfiddle.net/GHpux/

我使用的CSS代碼在這裏：

div.body{ 
    width: 1047px; 
    margin-top: 210px; 
    margin-left: auto; 
    margin-right: auto; 
    z-index: 1; 
} 

div.content{ 
    background-color: #dbdbdb; 
    width: 750px; 
    max-width: 750px; 
    float: left; 
    padding: 15px; 
    margin-right: 15px; 
    z-index: 1; 

    display: inline-block; 
} 

div.sidebar{ 
    background-color: #dbdbdb; 
    width: 215px; 
    float: right; 
    position: absolute; 
    padding: 15px; 
    display: inline-block; 

} 

，但我得到的div的不良影響不匹配了，你可以在的jsfiddle還是看我的網站。我想知道這有什麼問題嗎？謝謝。我嘗試了很多東西。謝謝

Answer 1

好的網站，順便說一句。對不起，我沒有看到這個問題。修復程序爲：

您需要在.sidebar之前刪除<br />。

請參閱截圖。

刪除它，使它看起來是這樣的：

Answer 2

側邊欄之前取出<br>，從側邊欄除去position:absolute和float:right並添加vertical-align:top側邊欄和內容。

http://jsfiddle.net/GHpux/1/