固定三列标题

Question

我有3个包含文字link的列 如果3列具有相同数量的文本，则3列保持完美顺序。 当我在其中一列中写入少量文本时，我得到以下结果link

无论下面有多少文字，我希望图标和文字保持固定。我怎样才能做到这一点 ？

这是我的代码：

HTML

  <ul class="columns"> 

        <li class="clearfix"> 

            <span><img src="icon path" /><p>heading</p></span>

        <p>text below</p>

        </li> 

 </ul>

CSS：

.columns li{display: inline-block; width: 250px; margin-left: 100px;} 

.columns li:first-child{margin: 0;} 

.columns li img{float: left;} 

 .columns li span p{float: left; margin: 30px 0 0 10px; width: 150px; height: 30px; line-height: 1;}

.columns li  p{margin-top: 20px; } 

Answer 1

使用

.columns {
    vertical-align: top;
}