环绕文本将图像向上推

Question

我需要一些帮助来防止下面的一些文本和图像在环绕时将图像向上推。请查看所附图片以最好地理解我在说什么。目标是让所有图标水平排列，并使 "This Text Is" 与 "Some Text" 和 "More Text" 对齐。 "Longer" 应该在它自己的行中低于其他所有内容。

每个图标和文本都包装在自己的容器中 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 将失去其固定宽度。使用 margin、padding 或 positioning 来移动被向上推回的图标不是一个有效的解决方案，因为那样会变得混乱。总共有 10 个图标，图标 div 宽度根据浏览器宽度而变化（这使得文本根据浏览器宽度在不同的点换行）。我希望有一个简单的 CSS 解决方案，例如 "vertical-align"（没有用）。

如有任何帮助，我们将不胜感激。

Answer 1

你可以把它包在一个弹性容器里关于 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>

Answer 2

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

.icon {
  vertical-align: top;
}

Answer 3

您可以浮动留在容器中的图标，并使容器触发回流以包含图标。

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

.container {
    overflow: hidden;
}

环绕文本将图像向上推

Wrapping Text Pushing Image Above It Up When

html

css

text

image

word-wrap