Question

我并不是最好的CSS，所以我真的不明白这个问题的根源来自哪里。我有一个非常少量的CSS，这就是为什么我不明白这一点。下面是正在发生的事情的图像。图像下方是CSS / HTML。问题是“Hello nick !!!”距绿色约150px。

html and css problem http://gyazo.com/6a89e5b95726736e4c48cab53d26b5c2.png

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推到你想要的地方。：）

Answer 2

尝试将float添加到#sidebarContainer

    float:left;

div半途而废

2 个答案: