html - 内联/内联 block 不起作用。 Div 仍然堆积

Question

我之前已经发布了一些这样的代码，试图在正确的位置获得侧边栏链接并以一种特殊的方式看起来，我决定朝着不同的方向前进。我现在需要的是知道我应该做什么来获得我在侧边栏旁边而不是下方标记为“内容”的 div。我已经尝试了一切。侧边栏和内容 div 一起在同一个 div 中，我试过以内联、内联 block 的形式显示。什么都不管用。我只希望它们彼此相邻并保持水平。你能再帮我一下吗？非常感谢!

此处显示代码: http://jsfiddle.net/eNUpJ/11/

HTML

 </div>
    <div id="wholething">
        <div id="sidebar">
                <h3>Navigation Links</h3>

            <div id="sidelinks">
                <div id="buttons"><a href="#">Home</a>
                </div>
                <div id="buttons"><a href="#">Biography</a>
                </div>
                <div id="buttons"><a href="#">News</a>
                </div>
                <div id="buttons"><a href="#">Music</a>
                </div>
                <div id="buttons"><a href="#">Contact</a>
                </div>
            </div>
        </div>
        <div id="content">
            <p>News stuff and things</p>
        </div>
    </div>
</body>

CSS

#sidebar {
    background: #464646;
    width: 250px;
    height: 500px;
    margin-left: 50px;
    border-radius: 15px;
    position: relative;
}
h3 {
    font-family:'Coda', cursive;
    color: white;
    background: #6B6B6B;
    font-size: 24px;
    text-align: center;
    padding: 15px 0 8px 0;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}
#sidelinks {
    font-family:'Armata', sans-serif;
    width: 250;
    font-size: 25px;
    text-decoration: none;
    color: white;
    background-color: #4D4D4D;
    padding: 10px;
    line-height: 40px;
}
#buttons a {
    text-decoration: none;
    color: white;
}
#content {
    position: relative;
    width: 750px;
    border-radius: 15px;
    background: #464646;
}
#wholething {
    display: inline;
}

Answer 1

给#content 和#sidebar float: left。您还应该从 #wholething 中删除 display:inline。此外，您应该知道，如果您想在#content 和#sidebar 下方添加任何内容(例如，页脚、版权声明等)，您需要给它 clear:both ，这将迫使它位于两个 float div 的下方。