图像堆叠在 aa 列而不是单行中

Bruce 发表于 Dev

布鲁斯

我希望这些图像在 1 行中水平呈现，而不是在 2 个单独的行上呈现。由于宽度的原因，在图像下方添加文本会使图像移动到单独的行。如何使标题文本与图像的宽度相同？

                    <img src="image.png" width="" alt="" style="width:100%;max-width:66px;height:auto; padding:15px"><span style="font-family: 'Gotham Rounded Book', Arial, sans-serif;Margin:0;font-size:24px;Margin-bottom:10px;max-width:66px;"><p>Shop Auto</p></span>

                   <img src="image.png.png" width="" alt="" style="width:100%;max-width:66px;height:auto;padding:15px"><span style="font-family: 'Gotham Rounded Book', Arial, sans-serif;Margin:0;font-size:24px;Margin-bottom:10px;max-width:66px;"><p>Shop Home</p></span>

          </div>      
          </tr></tbody>
        </table>
    </td>

菲利普

听起来您想将img和包裹span在 adiv或类似物内，并将它们设置为彼此相邻浮动或使用 flexbox 来对齐和调整它们的大小。那么这些divs的内容不能超过包装器，因此您的图像仍然可以保持在同一行上。

看看：https : //css-tricks.com/snippets/css/a-guide-to-flexbox/

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。