为什么`<input />`拖动父div？

Question

input元素似乎拖下了父div。为什么会这样？我该如何解决？

html

  <div class="main">
    <div class="one">
    </div>
    <div class="two">
      <input type="text" /> <!-- Without this input, the page looks fine -->
    </div>
    <div class="three">
    </div>
  </div>

css

.main>div {
  display: inline-block;
  height: 330px;
}

.one {
  width: 18%;
  background-color: #fbfbfb;
}

.two {
  margin-left:10px;
  width: 50%;
  border: 2px solid #ddd;
}

.three {
  margin-left: 10px;
  width: 20%;
  background-color: #bbb;
  border: 5px dashed #ddd;
}

效果如下：http://jsbin.com/gubozapove/edit?output

Answer 1

这是因为你给了display: inline-block;。要解决这个问题，请提供：

vertical-align: top;

预览

原因：默认情况下，内联块元素往往与baseline对齐。

小提琴：http://jsbin.com/kitazeweqi/1/edit?output

Answer 2

添加

vertical-align: text-top;

到.main>div。

Answer 3

您可以修复此问题，将float: left;添加到.one和.two