javascript - 将 div 与顶部内联对齐

Question

我有一个包含两个其他 div 的 div，它们应该与顶部内联显示。我遇到的问题是它们本来应该位于顶部的一个级别，但是当我用不同数量的文本行填充它们时，其中一个被向上推。如果两个 div 具有相同的大小并且完全内联对齐，那就太棒了。

父div的CSS:

#parent{
position:relative;
border:1px solid black;
width:303px;
}

第一个div的CSS:

#firstdiv{  
position:absolute; 
bottom:0; 
left:0; width:150px; 
border:1px solid black;
}

第二个div的CSS:

#seconddiv{  
position:absolute; 
bottom:0; 
right:0;
width:150px; 
border:1px solid black;
}

结果:

JSfiddle!

Answer 1

如果这是您希望它根据您的屏幕截图显示的样子。使用 position:absolute 将是一场灾难，因为您向其中添加了更多元素。请改用 flex。

You can see that the child containers maintain there original height. That is because of the class flex-item using flex-start to align them at top. but if you want them to occupy full height. Just remove flex-start;

#parent {
  margin-top: 30px;
  position: relative;
  border: 1px solid black;
  width: 303px;
  text-align: center;
}

.sub-container {
  display: flex;
}

.flex-item {
  align-self: flex-start; //Use this only if you want uneven heights and want to align them from top
}

#firstdiv {
  width: 150px;
  border: 1px solid black;
}

#seconddiv {
  width: 150px;
  border: 1px solid black;
}

<div id="parent">
  Hello Stack overflow!
  <div class="sub-container">
    <div id="firstdiv" class="flex-item">
      First div with more content
    </div>
    <div id="seconddiv" class="flex-item">
      second div
    </div>
  </div>
</div>