包装文字将图片向上推时

我需要一点帮助，防止下面的文本和图像在包装时向上推动图像。请参阅附件图片以更好地理解我在说什么。我们的目标是让所有图标水平排列，让“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解决方案，如“垂直对齐”（这不起作用）。

任何帮助将不胜感激。

来源

2017-03-15 John O

vertical-align：top; – muratkh

你说垂直对齐没有工作。这应该对齐有相同的高度顶端图片：

.icon { 
    vertical-align: top; 
}

来源

2017-03-15 22:26:56

它确实就是这么简单。 –

是的，这绝对有用。我认为我在形象上是这样，而不是div，这就是为什么它以前没有用。谢谢！ –

你可以将它包装在柔性容器很大写了关于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>

来源

2017-03-15 22:18:34 happymacarts

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

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

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

.container { 
    overflow: hidden; 
}

来源

2017-03-15 23:11:12

包装文字将图片向上推时

回答

相关问题