内联/内联块无法正常工作。 Div仍然堆积

I have posted some of this code before, trying to get the sidebar links in the right places and look a special way, I have decided to go in a different direction with that. What I need now is know what I am supposed to do to get the div that I have labeled "content" next to the sidebar instead of below it. I've tried everything. The sidebar and the content div are in the same div together and I've tried displaying in inline, inline-block. Nothing works. I just want them next to each other and level. Can you help me out again? Thanks so much!

我之前已经发布了一些代码,尝试将侧边栏链接放在正确的位置并且看起来很特别,我决定采用不同的方向。我现在需要的是知道我应该做什么来获得我在侧边栏旁边而不是在它旁边标记为“内容”的div。我已经尝试了一切。侧边栏和内容div在同一个div中,我尝试以内联,内联块显示。什么都行不通。我只是希望他们彼此相邻和水平。你能帮我一次吗?非常感谢!

Code displayed here: http://jsfiddle.net/eNUpJ/11/

代码显示在这里: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;
}

1 个解决方案

#1

Give both #content and #sidebar float: left. You should also remove display:inline from #wholething. Also, you should know that if you want to add anything below the #content and #sidebar - for instance, a footer, with a copyright statement or such - you'll need to give it clear:both, which will force it to be below the two floated divs.

同时给#content和#sidebar float:left。您还应该从#wholething中删除display:inline。此外,您应该知道,如果您想在#content和#sidebar下添加任何内容 - 例如,页脚,带有版权声明等 - 您需要明确说明:两者都会强制它成为在两个漂浮的div下面。