让 div 在 div 内顶部对齐

Question

我在另一个 id 为粉色的 div 中有三个 id 为红色绿色和蓝色的 div。我期望的是红色、绿色和蓝色都可以在粉红色的顶部进行。我还希望每个元素的宽度都等于其中最宽的子元素的宽度。但是发生的事情是它们与粉红色的底部对齐。此外，当将孩子添加到其中之一时，它的宽度和高度都会增加，从而增加粉红色的宽度和高度。

我的问题是三方面的。一、为什么红、绿、蓝不对齐粉红色的顶部；或者更准确地说，为什么它们与粉红色的底部对齐？其次，为什么当我添加孩子时，红色绿色或蓝色的宽度会增加——即使孩子是垂直排列的？最后，我必须改变什么才能使红色绿色和蓝色与粉红色的顶部对齐并且每个的宽度等于其最宽的孩子的宽度？我试图澄清我的问题，所以如果我做得不够，请原谅我。

<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

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

这些容器与其父容器的底部对齐，因为它们是 inline-blocks 并且 inline-block 的行为类似于纯文本的行为。你看，如果我写一个文本“LiKe tHIs”，所有的字母都与基线对齐，看起来像底线（但并不完全）。如果您想象字母的字体大小有很大差异，就会更容易理解。

1. 为什么当我向其中添加子元素时，红色绿色或蓝色的宽度会增加？

这很有趣。通常，您不会使用 100% 宽度的 inline-block 容器。父容器也是 inline-block ，这使得它根据它的内容计算它的宽度。事实上，它的宽度等于里面所有文本的总宽度。但是由于每个孩子都有 100% 的宽度，它们会溢出父容器并最终出现在下一行。毕竟这些计算浏览器只是不重新计算父母的宽度，你会看到结果。

1. 我必须更改哪些红色、绿色和蓝色框才能将它们与粉色容器的顶部对齐？

有几种方法可以实现它。表格、浮动元素等。当您不追求旧设备支持时，我更喜欢使用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>

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

Answer 2

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

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