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

但是，您的设置不太理想。我建议您使用居中的包装元素，而不是第一次使用大的左边距浮动，并以相同的方式设置每个列的样式。

Answer 2

这是你需要的吗？一个CSS类和每列自动1/4宽度。

请查看演示：http://jsfiddle.net/sk1rqxeo/

.show-text-col {
    float: left;
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 18px;
    color: #606060;
    width:24.5%;
    display: inline-block;
}

Answer 3

您需要将宽度设置为<p>标记

<强> FIDDLE DEMO

.show-text-col-3 p{
    width:200px;
}