div显示位置不正常

Question

<div class="info-pane" style="
  width: 100%;
  height: 90px;
  margin-bottom: 20px;
  height: 90px;
  background-color: rgba(255,255,0,0.3);">
  <div style="height: 100%; width: 900px; float: left;
      display:inline-block;">
    <div style="
      background-color: #f0f0f0;
      display: inline-block;
      height: 100%;
      margin-right: 20px;
      width: 200px;
      min-width: 200px;
      box-sizing: border-box;">
      first
    </div>
    <div style="
      background-color: #f0f0f0;
      display: inline-block;
      height: 100%;
      margin-right: 20px;
      width: 200px;
      min-width: 200px;
      box-sizing: border-box;
      overflow: hidden;">
      second
    </div>
  </div>
  <div
    style="height: 100%; width: 200px; float: right;
      display:inline-block; background-color: #f0f0f0;">
    right
  </div>
</div>

显示效果如下，first div 被往下挤了一截：

外面还有两层div，我没贴上来，应该没影响吧。

请问怎么才能让 first、second、right 水平对齐呢？

Answer 1

first那个div也加上overflow: hidden;

Answer 2

上下两种方式都可以对齐

Answer 3

可使用flex布局
给最外层（父容器）加上下列样式

display: flex;
justify-content: center;

你的写法中,使用的是浮动，second中去掉overflow:hidden即可

<div hljs-attr" >background-color: #f0f0f0;
      display: inline-block;
      height: 100%;
      margin-right: 20px;
      width: 200px;
      min-width: 200px;
      box-sizing: border-box;
      overflow: hidden;">
      second
    </div>