html - 动态高度未与顶部对齐的内联 block

Question

我有 2 个 inline-block 元素并排放置作为列。第一列改变了高度，因为我向它添加了内容。

我现在的问题是第二列位于展开的第一列的底部之后，因为它们都是inline-block。我希望第二列位于顶部，而不是位于其他元素的底部。

JSFiddle

$("a").click(function(e) {
  e.preventDefault();
  $("<p>Lorem ipsum...</p>").appendTo($("#dynamic"));
});

.col {
  display: inline-block;
  width: 20%;
  margin: 0;
  background-color: #dadada;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="col" id="dynamic">
  <p>Lorem ipsum...</p>
</div>
<div class="col">
  <p><a href="#">Click me</a></p>
</div>

Answer 1

vertical-align 的默认值为baseline，因此请将其更改为top。

$("a").click(function(e) {
  e.preventDefault();
  $("<p>Lorem ipsum...</p>").appendTo($("#dynamic"));
});

.col {
  display: inline-block;
  width: 20%;
  margin: 0;
  background-color: #dadada;
  vertical-align: top; /*added*/
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="col" id="dynamic">
  <p>Lorem ipsum...</p>
</div>
<div class="col">
  <p><a href="#">Click me</a>
  </p>
</div>