html - 嵌套的内联 block 不会正确换行

Question

Oriol 非常完美地回答了我的问题:我应该 float 第一个容器，而不是在两个容器上使用内联 block ，而让第二个容器没有任何特定的样式。同时，我应该在主容器和第二个容器上使用 overflow:hidden 以避免在框外出现尴尬的包装。

---

原始问题

我正在使用响应式布局制作一个非常简单的个人资料页面。配置文件本身包含在固定在屏幕底部的 DIV 中。

在此处查看演示:https://jsfiddle.net/ner8j6vz/

配置文件由嵌套在主容器内的两个容器 DIV 组成:

• 头像和带信息的UL(固定宽度)
• 带有 DIV 的菜单(应在容器收缩或展开时换行)

容器显示为内联 block ，带有 white-space:nowrap 以防止它们换行(我想这很明显)。所以容器排列得很好，但现在我遇到了另一个问题 - 第二个容器没有跟随主容器的宽度，所以菜单 DIV 不会像我希望的那样换行。

我认为这应该很简单，但显然不是。当然，我很有可能只是错过了一些关键的东西，而现在由于寻找其他问题而对它视而不见。

我不想通过解释我之前尝试过的内容来混淆问题，但我已经尝试了 float 和内联 block 的变体，并阅读了十几篇关于 float 和内联 block 如何工作的文章以及如何尝试处理他们的怪癖。我假设我的问题与第一个容器如何具有静态宽度，而第二个容器具有可变宽度有关，但我不知道如何。

代码:

<div id="maincontainer">
    <div id="subcontainer1">
    </div>
    <div id="subcontainer2">
        <div class="menuelement"></div>
        <div class="menuelement"></div>
        <div class="menuelement"></div>
        <div class="menuelement"></div>
        <div class="menuelement"></div>
        <div class="menuelement"></div>
    </div>
</div>

#maincontainer
{
    height:150px;
    display:block;
    vertical-align:top;
    white-space:nowrap;
}
#subcontainer1
{
    width:100px;
    height:100%;
    display:inline-block;
    border:2px solid rgb(240,90,40);
}
#subcontainer2
{
    height:100%;
    display:inline-block;
    vertical-align:top;
}
.menuelement
{
    display:inline-block;
    width:50px;
    height:50px;
    background-color:rgb(240,90,40);
}

Answer 1

我建议使用 float 。这样 #subcontainer2 仍然是 block 元素，并调整其宽度以避免 #maincontainer 溢出。

#maincontainer {
  height: 150px;
  display: block;
  vertical-align: top;
}
#subcontainer1 {
  width: 100px;
  height: 100%; /* consider `calc(100% - 3px)`,
                   or `box-sizing: border-box`  */
  float: left;
  border: 2px solid rgb(240, 90, 40);
}
#maincontainer, #subcontainer2 {
  overflow: hidden; /* clear float */
}
.menuelement {
  display: inline-block;
  width: 50px;
  height: 50px;
  background-color: rgb(240, 90, 40);
}

<div id="maincontainer">
  <div id="subcontainer1"></div>
  <div id="subcontainer2">
    <div class="menuelement"></div>
    <div class="menuelement"></div>
    <div class="menuelement"></div>
    <div class="menuelement"></div>
    <div class="menuelement"></div>
    <div class="menuelement"></div>
  </div>
</div>