当兄弟 div 的高度由于内容而更大时，为什么 div 不将文本与包含 div 的顶部对齐？

Question

I have two divs nested inside another div. Both child divs are of the same width, but one div contains more lines then the other div and as a result, one div does not align it's content text to the top of the div. I have tried using vertical-align: top and that hasn't worked.

 .footer { width: 600px; vertical-align: top; }.footer >.agency, .footer >.vendor { width: 297px; display: inline-block; vertical-align: top; }.footer >.agency >.details, .footer >.vendor >.details { font-size: 14px; line-height: 20px; }

 <div class="footer"> <div class="agency"> <div class="title"><b>Agency</b></div> <div class="details"> <div class="name">Name</div> <div class="address1">address</div> <div class="address2"></div> <div class="city-state-zip">City, ST 12345</div> </div> </div> <div class="vendor"> <div class="title"><b>Vendor</b></div> <div class="details"> <div class="name">Anonymous</div> </div> </div> </div>

Answer 1

 .footer { width: 300px; vertical-align: bottom; border:1px solid; }.footer >.agency, .footer >.vendor { width: 297px; display: inline-block; vertical-align: top; }.footer >.agency >.details, .footer >.vendor >.details { font-size: 14px; line-height: 30px; }

 <div class="footer"> <div class="agency"> <div class="title"><b>Agency</b></div> <div class="details"> <div class="name">Name</div> <div class="address1">address</div> <div class="address2"></div> <div class="city-state-zip">City, ST 12345</div> </div> </div> <div class="vendor"> <div class="title"><b>Vendor</b></div> <div class="details"> <div class="name">Anonymous</div> </div> </div> </div>

Answer 2

Since you are using display: inline-block , it aligns to the baseline and not to the middle, or top. So you need to use vertical-align: top to align the top of all the inline-block elements on the same line:

.footer > .agency,
.footer > .vendor {
  width: 297px;
  vertical-align: top;
  display: inline-block;
}
.footer {
  vertical-align: top;
}

You should give the vertical-align: top for the inline-block 's parent too.