如何做一个vertical-align：bottom但是10px

Question

我希望有两个内嵌块，第二个是垂直对齐：底部但是高达10个像素。我不确定我会怎么做。我在考虑这样的事情，但是如何将test2类移动10像素呢？

＆＃13;

＆＃13;

.test1{
  display:inline-block;
  border: 1px solid red;
  min-height: 50px;
}

.test2{
  display:inline-block;
  border: 1px solid blue;
  vertical-align:bottom;
}

＆＃13;

<div class='outer'>
  <div class='test1'>
    here is some info
  </div>
  <div class='test2'>
    here is more info
</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

如果我正确理解了您的问题，那就是答案：只需添加margin-bottom: 10px

即可

.test1{
  display:inline-block;
  border: 1px solid red;
  min-height: 50px;
}

.test2{
  display:inline-block;
  border: 1px solid blue;
  vertical-align:bottom;
  margin-bottom: 10px;
}

<div class='outer'>
  <div class='test1'>
    here is some info
  </div>
  <div class='test2'>
    here is more info
</div>
</div>