Question

Oriol非常完美地回答了我的问题： 我不应该在两个容器上使用内联块，而应该浮动第一个容器，而不使用任何特定样式的第二个容器。同时我应该使用overflow：隐藏在主容器和第二个容器上，以避免在盒子外面尴尬地包装。

原始问题

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

该配置文件由两个容器DIV组成，嵌套在一个主容器中：

个人资料图片和UL信息（固定宽度）
带有DIV的菜单（当容器缩小或展开时应该换行）

容器显示为内联块，带有白色空间：nowrap以防止它们包裹（显然，我想）。所以容器很好地排队，但现在我有另一个问题 - 第二个容器没有跟随主容器的宽度，所以菜单DIV不会像我想要的那样换行。

我认为这应该很简单，但显然不是。当然，我很有可能只是错过了一些至关重要的东西，而现在却因为寻找其他问题而无视它。

我不想通过试图解释我之前尝试过的问题来混淆这个问题，但我已经尝试了浮动和内联块的变体，并阅读了十几篇有关如何浮动和内联的文章-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

我建议使用花车。这种方式#subcontainer2仍然是一个块元素，并调整其宽度以避免溢出#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>

Answer 2

不是积极的，但这是你正在寻找的效果吗？使用浮动可能是要走的路。 https://jsfiddle.net/ner8j6vz/4/

#maincontainer {
overflow:hidden;
width:80%;
height:158px;
}
#subcontainer1 {
float:left;
margin-right:5px;
width:100px;
height:154px;
border:2px solid rgb(240, 90, 40);
}
#subcontainer2 {
height:100%;
vertical-align:top;
}
.menuelement {
display:inline-block;
width:50px;
height:50px;
background-color:rgb(240, 90, 40);
}

嵌套的内联块不会正确包装

原始问题

2 个答案: