`显示：内联块'元素未正确对齐

Question

概述

我有两个div元素，其中col类的宽度为50％。

我试图让他们坐在一起;但是，第二个元素位于第一个元素的基线：

代码

注意：左栏的最小宽度为540px，因此您可能需要以全屏模式预览

div.canvas {
  background-image: url(//www.transparenttextures.com/patterns/asfalt-dark.png);
  padding: 100px 0;
  background-color: #F2E394;
  text-align: center;
}

div.col {
  width: 50%;
  display: inline-block;
}

/* Device Mockups */

div#phone {
  width: 540px;
  height: 540px;
  background: url(//i.imgur.com/ieBaiQ1.png);
  background-size: contain;
  background-position: center center;
  position: relative;
  margin: 0 auto;
}

div#phone div.frame {
  position: absolute;
  top: 85px;
  bottom: 85px;
  left: 165px;
  right: 165px;
  overflow-x: hidden;
  overflow-y: auto;
  border-radius: 3px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
  background: white;
}

<div class="canvas">
  <div class="col">
    <div id="phone">
      <div class="frame">
      </div>
    </div>
  </div><div class="col ta-l">
    <h1>Header 1</h1>
  </div>
</div>

问题

如何确保右列与左列垂直对齐，文本“标题1”从与左栏顶部相同的位置开始？

Answer 1

只需将vertical-align: top添加到div.col（默认情况下，内联元素的vertical-align设置为baseline - 您只需要告诉它与顶部对齐）。

＆＃13;

＆＃13;

div.canvas {

  background-image: url(//www.transparenttextures.com/patterns/asfalt-dark.png);

  padding: 100px 0;

  background-color: #F2E394;

  text-align: center;

}

div.col {

  width: 50%;

  display: inline-block;

vertical-align: top;

}

/* Device Mockups */

div#phone {

  width: 540px;

  height: 540px;

  background: url(//i.imgur.com/ieBaiQ1.png);

  background-size: contain;

  background-position: center center;

  position: relative;

  margin: 0 auto;

}

div#phone div.frame {

  position: absolute;

  top: 85px;

  bottom: 85px;

  left: 165px;

  right: 165px;

  overflow-x: hidden;

  overflow-y: auto;

  border-radius: 3px;

  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);

  background: white;

}

＆＃13;

<div class="canvas">
  <div class="col">
    <div id="phone">
      <div class="frame">
      </div>
    </div>
  </div><div class="col ta-l">
    <h1>Header 1</h1>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用vertical align

vertical-align: top;

右栏

Answer 3

使用此CSS：

.canvas{overflow: hidden;}
.col{float: left;}