css - 水平布局问题 - 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 中，以便它们与其余部分内联显示。

应该看起来像这样：