在 Div 中获取 Divs 到 Top-Align

Question

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

我的问题是three-fold。首先，为什么红色、绿色和蓝色没有对齐到粉色的顶部；或者更准确地说，为什么它们与粉红色的底部对齐？其次，为什么当我向其中添加 children 时，红绿或蓝的宽度会增加——即使 children 是垂直排列的？最后，我必须更改什么才能使红色、绿色和蓝色与粉色顶部对齐，并且每个宽度等于其最宽 child 的宽度？我试着把我的问题说清楚，所以如果我说得不够，请原谅我。

<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

Why are the red, green, and blue blocks aligned to the bottom of pink?

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

Why does the width of red green or blue increase as I add children to it?

这很有趣。通常，您不会使用宽度为 100% 的 inline-block 容器。 parent 容器也是 inline-block，这使得它根据内容计算宽度。事实上它的宽度等于里面所有文本的总宽度。但是由于每个 child 都有 100% 的宽度，它们会溢出 parent 容器并在下一行结束。在所有这些计算之后，浏览器不会重新计算 parent 的宽度，您会看到结果。

What must I change for red, green and blue boxes to align them to the top of the pink container?

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

在 Div 中获取 Divs 到 Top-Align

Getting Divs to Top-Align Inside a Div

html

css

vertical-alignment