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

时间:2018-03-01 00:35:09

标签: html css vertical-alignment

我有三个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>

任何见解都表示赞赏。

2 个答案:

答案 0 :(得分:1)

  
      
  1. 为什么红色,绿色和蓝色的块与粉红色的底部对齐?
  2.   

这些容器与父级的底部对齐,因为它们是内联块,而内联块的行为类似于纯文本的行为。你看,如果我写一个文字“LiKe tHIs”,所有字母都与基线对齐,看起来像底线(但它不完全)。如果你想象字母的字体大小差异会更容易理解。

  
      
  1. 为什么当我添加儿童时,红绿色或蓝色的宽度会增加?
  2.   

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

  
      
  1. 我必须更改红色,绿色和蓝色框以将它们对齐到粉红色容器的顶部?
  2.   

有几种方法可以实现它。表,浮动元素等。当您不追逐旧的设备支持时,我更喜欢使用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;(这是默认设置)。

答案 1 :(得分:0)

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

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