让分歧在一个分区内排名靠前

Question

我有三个div，其中id为红色绿色和蓝色，另一个div为id粉红色。我所期待的是红色，绿色和蓝色都是粉红色的顶部。我还希望每个的宽度等于其中最宽的子元素的宽度。但正在发生的事情是它们与粉红色的底部对齐。此外，随着儿童被添加到其中一个，其宽度和高度一起增加，增加了粉红色的宽度和高度。

我的问题是三方面的。首先，为什么红色，绿色和蓝色不与粉红色的顶部对齐;或者更确切地说，为什么它们与粉红色的底部对齐？第二，为什么当我添加孩子时，红绿色或蓝色的宽度会增加 - 即使孩子们是垂直排列的？最后，我必须改变哪些红绿色和蓝色与粉红色的顶部对齐，每个的宽度等于其最宽的孩子的宽度？我试着清楚我的问题所以如果我做空，请原谅我。

<style>
    .menu {
        position: absolute;
        left: 10px;
        top: 30px;
        border-radius: 3px;
        background-color: lightgoldenrodyellow;
        z-index: 5000;
    }
    .subMenu {
        position: relative;
        display: inline-block;
    }
    .subMenuHead {
        display: inline-block;
        width: 100%;
        font-weight: bold;
        text-align: center;
    }
    .subMenuOption {
        display: inline-block;
        width: 100%;
        color: darkblue;
        font-size: 16px;
        white-space: nowrap;
    }
</style>



<div id="menu" class="menu">
    <div id="pink" style="background-color:pink;">
        <div id="red" class="subMenu" style="background-color:red;">
            <span class="subMenuHead">Project</span>
            <span class="subMenuOption">New...</span>
        </div>
        <div id="green" class="subMenu" style="background-color:green;">
            <span class="subMenuHead">Upload Data</span>

        </div>
        <div id="blue" class="subMenu" style="background-color:blue;">
            <span class="subMenuHead">Account</span>
        </div>

    </div>
</div>

任何见解都表示赞赏。

Answer 1

您尝试将此代码添加到样式

#pink{display: table}
#pink > *{display: table-cell}

Answer 2

1. 为什么红色，绿色和蓝色块与粉红色底部对齐？

这些容器与其父级的底部对齐，因为它们是内联块，而内联块的行为类似于纯文本的行为。你看，如果我写一个文字“LiKe tHIs”，所有字母都与基线对齐，看起来像底线（但它不完全）。如果您想象字母大小明显不同，将更容易理解。

2. 当我添加孩子时，为什么红绿色或蓝色的宽度会增加？

这很有趣。通常，您不会使用宽度为100％的内联块容器。父容器也是内联块，它可以根据内容计算它的宽度。实际上，它的宽度等于内部所有文本的总宽度。但是，由于每个孩子都有100％的宽度，他们会溢出父容器并最终到达下一行。在所有这些计算之后，浏览器只是不重新计算父级的宽度，您会看到结果。

3. 我必须更改红色，绿色和蓝色框以将它们对齐到粉红色容器的顶部？

有几种方法可以实现它。表，浮动元素等。当您不追逐旧的设备支持时，我更喜欢使用flexbox方法。

#pink {
     display: flex;
     align-items: flex-start;
   }

   .subMenu {
     display: flex;
     flex-direction: column;
     width: 33.33%;
   }

   .subMenuHead {
     width: 100%;
     font-weight: bold;
     text-align: center;
     white-space: nowrap;
   }

<div id="menu" class="menu">
  <div id="pink" style="background-color:pink;">
    <div id="red" class="subMenu" style="background-color:red;">
      <span class="subMenuHead">Project</span>
      <span class="subMenuOption">N</span>
      <span class="subMenuOption">N</span>
      <span class="subMenuOption">N</span>
      <span class="subMenuOption">N</span>
      <span class="subMenuOption">Text text text text text text text text text text text text text text text</span>
      <span class="subMenuOption">N</span>
    </div>
    <div id="green" class="subMenu" style="background-color:green;">
      <span class="subMenuHead">Upload Data</span>
      <span class="subMenuOption">N</span>
      <span class="subMenuOption">N</span>
      <span class="subMenuOption">N</span>
      <span class="subMenuOption">N</span>
    </div>
    <div id="blue" class="subMenu" style="background-color:blue;">
      <span class="subMenuHead">Account</span>
    </div>
  </div>
</div>

与表格不同，弹性箱模型允许红色，绿色和蓝色框具有不同的高度。这样，它现在完全按照您在问题中的要求（将它们对齐到顶部）。但如果你想让它们相等 - 删除align-items: flex-start;或使用align-items: stretch;（这是默认值）。