为什么min-height将div推到底部？

Question

将div.left添加到CSS时，

min-height会被推到底部。任何人都可以解释为什么会这样吗？

.left, .right {
  width: 170px;
  min-height: 150px;
  border: 1px solid #666;
  display: inline-block;
}

<div class="left">
  <ul>
    <li>Lorem ipsum 1</li>
    <li>Lorem ipsum 2</li>
    <li>Lorem ipsum 3</li>
    <li>Lorem ipsum 4</li>
  </ul>
</div>

<div class="right">
  <ul>
  </ul>
</div>

Answer 1

min-height没有将其推下来，因为vertical-align属性（默认值为baseline）而发生这种情况。如果您将vertical-align: top应用于.left，则问题将得到解决。