側邊欄中的圖像將主要區域中的內容下推

Question

我遇到了一個問題，左側欄上的徽標圖像實際上將div中的內容向下推至右側。任何人都可以解釋爲什麼可能會發生？ H1應該位於頁面頂部，但當我移除徽標圖像時，它僅位於那裏。

Demo

* { 
    margin: 0; 
    padding: 0; 
    border: 0; 
} 
li { 
    list-style: none; 
} 
a { 
    text-decoration: none 
} 
html, body { 
    height: 100%; 
    max-height: 100%; 
    padding:0; 
    margin:0; 
} 
.wrapper { 
    display:table; 
    width:100%; 
    height:100%; 
} 
.wrapper > div { 
    display:table-cell; 
} 
.wrapper .left { 
    width:200px; 
    background-color:#34495E 
} 
table { 
    width:100%; 
    background-color: pink; 
} 
td { 
    background-color: fff; 
} 
tr { 
    height: 60px; 
} 
th { 
    text-align: left 
} 
#btn_pri { 
    background-color: 60A0DF; 
    color: white; 
} 
#btn_sec { 
    background-color: #e74c3c; 
    color:white; 
} 
.navigation { 
} 
.navigation li { 
} 
.navigation li span { 
    display: inline-block; 
    background: url(http://www.otlayi.com/web_images/content/free-doc-type-sprite-icons.jpg) no-repeat left center; 
    width: 16px; 
    height: 16px; 
    overflow: hidden; 
    margin-left: 15px; 
    margin-right: 15px; 
} 
.navigation li a { 
    display: block; 
    color: white; 
    padding-top: 15px; 
    padding-bottom: 15px; 
    font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; 
    font-size: 14px; 
} 
.navigation li a:hover { 
    background-color: #495C6D; 
} 
.navigation li a.active { 
    background-color: #495C6D 
} 
#rss span { 
    background-position: -52px -68px; 
} 
#photos span { 
    background-position: -90px -66px; 
} 
#links span { 
    background-position: -45px 0; 
} 
h1 { 
    font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; 
    font-size: 30px; 
    font-weight: 500; 
} 
.logo { 
    height: 50px; 
    margin-bottom: 30px; 
} 
.btn { 
    letter-spacing: 1px; 
    font-weight:bold; 
    padding-left: 10px; 
    padding-right: 10px; 
    height: 34px; 
    border-radius:3px; 
    border: 0px; 
    text-transform:uppercase; 
    font-size:12px; 
} 
#btn_pri { 
    background-color: #60A0DF; 
    color: white; 
} 
#btn_sec { 
    background-color: #e74c3c; 
    color:white; 
} 

我要去哪裏錯了？

Answer 1

這是因爲您使用的是table-cell;，因此您還需要使用vertical-align: top;。

.wrapper > div { 
    display:table-cell; 
    vertical-align: top; 
} 

Demo

另外，我覺得你的CSS是可怕的，遺憾的是鈍這裏，但使用像

tr { 
    /* Something */ 
} 

td { 
    /* Something */ 
} 

廣義元素選擇會導致你的長遠問題，您應該始終具體，將class指定給您的table元素並使用選擇器，如

table.class_name tr { 
    /* Something */ 
} 

看起來整齊。