包装文本时将图像向上推答案

【问题标题】：Wrapping Text Pushing Image Above It Up When包装文本时将图像向上推
【发布时间】：2017-08-06 21:13:17
【问题描述】：

我需要一些帮助，以防止下面的一些文本和图像在换行时将图像向上推。请查看附图以最好地理解我在说什么。目标是让所有图标水平排列，并让“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;
  }

似乎是“显示：内联块”导致了问题，但如果我将其更改为“内联”，图标 div 将失去其固定宽度。使用边距、填充或定位来移动被向上推回的图标不是一个有效的解决方案，因为这会变得混乱。总共有 10 个图标，图标 div 的宽度会根据浏览器的宽度而变化（这使得文本根据浏览器的宽度在不同的点换行）。我希望有一个简单的 CSS 解决方案，例如“vertical-align”（它不起作用）。

任何帮助将不胜感激。

【问题讨论】：

垂直对齐：顶部；

标签： html css image text word-wrap

【解决方案1】：

你说垂直对齐不起作用。这应该将具有相同高度的图像与顶部对齐：

.icon {
  vertical-align: top;
}

【讨论】：

真的就是这么简单。
是的，这绝对有效。我想我把它放在图像上，而不是 div，这就是它以前不起作用的原因。谢谢！

【解决方案2】：

你可以将它包装在一个弹性容器中关于 flex 的精彩文章here

  .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>

【讨论】：

感谢您的回复。我经常使用 flexbox，但在这种情况下，垂直对齐要容易得多。

【解决方案3】：

您可以将留在容器中的图标浮动，并导致容器触发重排以包含图标。

.icon {
    float: left;
    display: block;
}

.container {
    overflow: hidden;
}

【讨论】：