Question

我遇到了一个问题，左侧边栏上的徽标图片实际上将div中的内容向下推到了右侧。任何人都可以解释为什么会发生这种情况？ H1应位于页面的顶部，但只有在我删除徽标图像时才会存在。

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

看起来很整洁。

侧边栏中的图像按下主区域中的内容

1 个答案: