动态高度未与顶部对齐的内联块

Question

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

我现在的问题是第二列跟在展开的第一列的底部，因为它们都是inline-block。我希望第二列粘在顶部而不是跟在另一个元素的底部。

JSFiddle

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;