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 中，以便它们与其余部分内嵌显示。

应该看起来像这样: