水平布局问题 - div重叠

Question

我遇到水平布局问题：http://jsfiddle.net/GqH6s/4/

似乎父#content div从其第一个子节点（#projects）获取其宽度，而不是其所有子节点的总宽度。

我知道我可以使用jQuery解决它，但如果可能的话我想使用CSS。

感谢您的帮助！

基本的html：

<div id="content">
    <div id="projects" class="section">
        <div class="block">Content</div>
    </div>
    <div id="profile" class="section">
        <div class="block">Content</div>
    </div>
    <div id="team" class="section">
        <div class="block">Content</div>
    </div>
</div>

和CSS：

    #content {
        white-space: nowrap;
        display: inline-block;
    }
    .section {
        display: inline-block;
    }
    .block {
        white-space: normal;
    }

Answer 1

您需要将#profile和#team div放在#project div中，以便它们与其余部分内联。

应该是这样的：