html - div 页面中途

Question

我并不是最擅长 CSS 的人，所以我真的不明白这个问题的根源在哪里。我的 CSS 很少，这就是为什么我不明白这一点。下面是正在发生的事情的图像。图像下方是 CSS/HTML。问题是“你好尼克!!!”距离果岭约 150px。

_{(来源:gyazo.com)}

CSS:

#sidebarContainer {
    display: inline-block;
    width: 200px;
    border-right: 1px solid #dcdcdc;
    height: 100%;
}

#sidebar li {
    font-family: 'proxima-nova';
    padding: 10px;
    text-align: center;
    border-bottom: 1px solid #dcdcdc;
}

#sidebar li.active {
    background-color: #efefef;
}

#sidebar li:hover {
    background-color: #efefef;
}

#sidebar li a {
    color: #333;
    padding: 10px;
    text-decoration: none;
}

#contentContainer {
    display: inline-block;
    padding: 10px;
}

HTML:

<div id="sidebarContainer">
    <ul id="sidebar">
        {% block sidebar %}
        <li class="active"><a href="">Home</a></li>
        <li><a href="">Inbox</a></li>
        <li><a href="">Favourites</a></li>
        <li><a href="">Discussion</a></li>
        <li><a href="">Contact</a></li>
        {% endblock %}
    </ul>
</div>

<div id="contentContainer">
    <div id="content">
        {% block content %}{% endblock %}
    </div>
</div>

Answer 1

 vertical-align : top;

将其添加到#contentContainer 样式。这应该将该 div 推到您想要的位置。 :)