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

标签 html css multiple-columns skeleton-css-boilerplate

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

最佳答案

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

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

关于html - 相邻列中的骨架图像和文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34712120/

相关文章:

html - CSS flex : Text escapes from container

javascript - 为画廊中的每张图片更改鼠标悬停时的图片?

mysql - 一次修改多个数据库列的格式

css - 错误, Bootstrap 中的一列

html - 使用 <li> 元素在 <ul> 底部的双边框之间添加间距

html - LI 元素向左浮动以便在容器中向右对齐?

html - ios从html获取href标签

html - 控制高度/行高::选择色调

mysql - SQL Server + 通过具有条件进行分组

html - Bootstrap - 行不是包装元素