html - 相邻列中的骨架图像和文本

Question

我是 CSS 初学者，在调整浏览器大小时遇到​​骨架问题。我有一个图像和文本在列中彼此相邻，如下所示(除了比下面显示的更多的文本)。这工作正常，但是当您重新调整浏览器以使其变窄时，当您的浏览器宽度非常窄时，文本会在图像“捕捉”到图像下方之前与图像重叠相当长的距离。

我认为可以使用 Skeleton CSS Utilities 解决此问题，但我一直无法弄清楚如何解决。我对 CSS 的理解非常基础。

<div class="row">
    <div class="one-third column">
        <img src="images/myimage.jpg">
    </div>
    <div class="two-thirds column">
        Lots of latin text here.
    </div>
</div>

Answer 1

在图像中添加以下类:u-max-full-width，像这样:

<img class="u-max-full-width" src="images/myimage.jpg" />