html - 侧边栏中的图像下推主要区域中的内容

Question

我有一个问题，左侧边栏上的 Logo 图像实际上将 div 中的内容下推到它的右侧。谁能解释为什么会这样？ H1 应该位于页面顶部，但只有在我删除 Logo 图像时它才会位于此处。

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 */
}

从长远来看会给你带来问题，你应该始终具体，为你的 table 元素分配一个 class 并使用像这样的选择器

table.class_name tr {
    /* Something */
}

看起来很整洁。