环绕文字推动图像在它上面时
我需要一些帮助，防止下面的一些文字和图像在包装时向上推动图像。 请参阅附件图片以更好地理解我在说什么。 我们的目标是让所有图标水平排列，让“This Text Is”与“Some Text”和“More Text”保持一致。 “更长”应该低于其他所有方面。
每个图标和文本都包装在自己的容器div中，如下所示：
<div class = "icon">
<a href = "#">
<img src = "icon.png" />
<h3>Some Text</h3>
</a>
</div>
以下是我用来创建固定宽度列的CSS：
.icon {
display: inline-block;
width: 150px;
}
看起来像“display：inline-block”导致了这个问题，但是如果我将它改为“inline”，图标div将失去固定宽度。 使用边距，填充或定位来移动被推回的图标不是一个有效的解决方案，因为这会变得混乱。 总共有10个图标，并且图标div的宽度根据浏览器的宽度而变化（这使得文本在不同的点上取决于浏览器的宽度）。 我希望有一个简单的CSS解决方案，如“垂直对齐”（这不起作用）。
任何帮助将不胜感激。
你说垂直对齐不起作用。 这应该对齐顶部具有相同高度的图像：
.icon {
vertical-align: top;
}
你可以把它包装在一个flex容器里，在flex里写得很棒
.icon {
display: inline-block;
width: 150px;
}
.container{display:flex} <div class="container">
<div class = "icon">
<a href = "#">
<img src = "http://placehold.it/150x150" />
<h3>Some Text</h3>
</a>
</div>
<div class = "icon">
<a href = "#">
<img src = "http://placehold.it/150x150" />
<h3>more Text</h3>
</a>
</div>
<div class = "icon">
<a href = "#">
<img src = "http://placehold.it/150x150" />
<h3>Some Longer Text with 2 lines</h3>
</a>
</div>
</div>您可以浮动容器中留下的图标，并使容器触发回流以包含图标。
.icon {
float: left;
display: block;
}
.container {
overflow: hidden;
}