Question

我已设法使用div将两个display: inline-block元素与以下代码（jsFiddle）并排对齐：

<html>
  <head>
    <style>
     #a {
       border: 10px solid red;
       width: 200px;
       height: 200px;
       background: black;
       font-size: 0;
     }
     #a1 {
       font-size: 16px;
       border: 10px solid green;
       width: 100px;
       height: 200px;
       background: white;
       box-sizing: border-box;
       display: inline-block;
     }
     #a2 {
       font-size: 16px;
       border:  10px solid green;
       width: 100px;
       height: 200px;
       background: white;
       box-sizing: border-box;
       display: inline-block;       
     }     
    </style>
  </head>
  <body>
    <div id='a'>
      <div id='apadding'>
        <div id='a1'>a1</div>
        <div id='a2'>a2</div>
      </div>
    </div>
  </body>
</html>

以上产生了以下预期结果：

我可以更改两个div元素的边框（只要它们都具有相同的边框），结果就是预期的。

但是，当我仅更改第二个div的边框时，例如20像素这是我得到的（jsFiddle）：

鉴于两个内部box-sizing元素的div都设置为border-box，我预计边框宽度的任何变化都会被该div框吸收并且不以任何方式扰乱对齐。令人费解的是，第二个div（其边框已更改）是在第一个div以某种方式被推离其位置时最终正确显示的那个。

我错过了什么？

Answer 1

由于边框现在包含在宽度中，因此内容框会相应缩小。这会影响该div的baseline。

由于默认情况下内联块项目与基线垂直对齐，因此只需将其设置为top即可解决问题。

＆＃13;

#a {
  border: 10px solid red;
  width: 200px;
  height: 200px;
  background: black;
  font-size: 0;
}
#a1 {
  font-size: 16px;
  border: 10px solid green;
  width: 100px;
  height: 200px;
  background: white;
  box-sizing: border-box;
  display: inline-block;
}
#a2 {
  font-size: 16px;
  border: 20px solid green;
  width: 100px;
  height: 200px;
  background: white;
  box-sizing: border-box;
  display: inline-block;
}
#a1,
#a2 {
  vertical-align: top;
}

＆＃13;

<div id='a'>
  <div id='apadding'>
    <div id='a1'>a1</div>
    <div id='a2'>a2</div>
  </div>

＆＃13;

Answer 2

只需添加花车！像这样：

<html>
  <head>
    <style>
     #a {
       border: 10px solid red;
       width: 200px;
       height: 200px;
       background: black;
       font-size: 0;
     }
     #a1 {
       font-size: 16px;
       border: 10px solid green;
       width: 100px;
       height: 200px;
       background: white;
       box-sizing: border-box;
       display: inline-block;
        float:left; <===
     }
     #a2 {
       font-size: 16px;
       border:  20px solid green;
       width: 100px;
       height: 200px;
       background: white;
       box-sizing: border-box;
       display: inline-block;   
        float:left; <===
     }     
    </style>
  </head>
  <body>
    <div id='a'>
      <div id='apadding'>
        <div id='a1'>a1</div>
        <div id='a2'>a2</div>
      </div>
    </div>
  </body>
</html>

两个div的边框与`display：inline-block`并排

2 个答案: