html - CSS 文本从错误的地方开始

Question

这可能是一个愚蠢的问题，但它一直困扰着我。我制作了 4 个框，每个框的文本应该从同一行开始，但有时(当文本较少时)，它会从底部开始。

这是显示它的图像:

理想情况下，它应该从顶部开始一直到底部。像这样:

我应该对 CSS 代码进行哪些更改？

CSS:-

.show-text {
  margin-left: 264px;
  float: left;
  font-size: 15px;
  width: 15em;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  line-height: 18px;
  color: #606060;
}

.show-text-col-2 {
  display: inline-block;
  margin-left: 20px;
  font-size: 15px;
  width: 15em;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  line-height: 18px;
  color: #606060;
}

.show-text-col-3 {
  display: inline-block;
  margin-left: 20px;
  font-size: 15px;
  width: 15em;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  line-height: 18px;
  color: #606060;
}

.show-text-col-4 {
  display: inline-block;
  margin-left: 20px;
  font-size: 15px;
  width: 15em;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  line-height: 18px;
  color: #606060;
}

我的 JSFiddle:- http://jsfiddle.net/xa0obvyr/

Answer 1

因为您使用的是inline-block，所以如果默认值不适合您，您需要指定垂直对齐方式。在这种情况下，您需要

show-text-col-4 {vertical-align: top;}

但是，您的设置并不理想。与其第一次使用较大的左边距 float ，我建议您改为使用居中的包装元素，并以相同的方式设置每一列的样式。