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

这可能是一个愚蠢的问题，但它一直困扰着我很多。我做了4个盒子，每个盒子都应该有从同一行开始的文本，但有时（当文本较少时），它从底部开始。从错误的地方开始的CSS文本

这里显示它的图像： enter image description here

理想的情况下，它应该从顶部开始去，直到底部。就像这样：

enter image description here

我应该在我的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/

来源

2014-08-27 user2619381

为什么你有这么多相同的类？ – Kyle 2014-08-27 07:37:52

也发布你的html，如果你让小提琴更好 – Richa 2014-08-27 07:38:43

@Richa，这是我的小提琴。在jsfiddle中无法正确显示。 http://jsfiddle.net/xa0obvyr/ – user2619381 2014-08-27 07:41:18

这是你需要什么？带有一个CSS类和每列自动1/4宽度。

请检查演示：由于您使用inline-blockhttp://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; 
}

来源

2014-08-27 07:43:36 shershen

这个工程，但我会建议一个小小的改变。 'display：inline-block;'不再需要设置'float：left;'自动生成元素'display：block;'。或者，您可以用'vertical-align：top;'替换'float：left;'（保留'display：inline-block;'）以获得相同的结果。 – 2014-08-27 07:53:44

您需要设置宽度<p>标签

FIDDLE DEMO

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

来源

2014-08-27 07:46:21 Richa

，你需要指定垂直对齐如果默认值不适合你。在这种情况下，您需要

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

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

来源

2014-08-27 08:26:23

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

回答

相关问题