水平布局问题 - div 重叠答案

【问题标题】：Horizontal layout issues - divs overlapping水平布局问题 - div 重叠
【发布时间】：2013-11-18 16:54:18
【问题描述】：

似乎父级#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;
    }

【问题讨论】：

你想让所有元素从左到右吗？
是的，我愿意。 #content div 上的强制宽度为 9000px，然后布局显示为我想要的。

标签： css nowrap

【解决方案1】：

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

应该看起来像这样：

【讨论】：

感谢 MathiasaurusRex，但 #content div 已经是一个容器 div。如果我不能简单地将样式应用到当前结构，是否要在所有内容周围添加另一个样式？
没有。只需将配置文件和团队 div 放在项目 div 中，这样它们就会与该容器中的其他 div 保持一致。附上另一张图片，说明使用上述层次结构组织 div 时会发生什么。
@CarolineElisa 您也可以在#content 上设置一个固定宽度，但是如果用户调整浏览器字体的大小，这将导致您所有内容的右侧出现空白。
再次感谢 MathiasaurusRex，但 #content 的子项是动态生成的，将成为导航中的锚链接，因此它们必须是唯一的 div。另外，出于这个原因，我不希望#content 有固定宽度。