Question

我需要一些帮助来防止下面的某些文字和图像在包装时将图像向上推。请参阅附图，以便最好地了解我在说什么。目标是使所有图标水平排列，并将“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解决方案，如“vertical-align”（这不起作用）。

非常感谢任何帮助。

https://github.com/jcsilva/docker-kaldi-gstreamer-server

Answer 1

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

.icon {
  vertical-align: top;
}

Answer 2

您可以将其包装在Flex容器中伟大的写在flex here

＆＃13;

  .icon {
    display: inline-block;
    width: 150px;
  }
  .container{display:flex}

＆＃13;

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

＆＃13;

Answer 3

您可以浮动容器中的左侧图标，并使容器触发重排以包含图标。

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

.container {
    overflow: hidden;
}

包装文本将图像推到它上面的时候

3 个答案: