时间戳

首页 > 解决方案 > 如何使图像跨越多个列，同时让文本环绕它？

html - 如何使图像跨越多个列，同时让文本环绕它？

问题描述

我有一个 html 元素分成 3 列，使用column-count: 3;我想让图像跨越两列，并让任何文本或其他图像环绕它。

我知道可能有其他方法可以在不使用的情况下解决这个问题，column-count但我正在以编程方式创建 html，因此它的长度和内容是可变的。column-count自动处理

我尝试将图像的宽度更改为，200%但文本没有环绕它。

这是我当前的格式： https ://i.imgur.com/6lRfLQO.png

这是我想要的格式。https://i.imgur.com/mMDaUoX.png 我希望图像是红色矩形的大小，周围有文字：

这是我正在使用的 CSS 来达到预期的效果。

.blog-post {
    font-size: 8pt;
    line-height: 1.2;
    font-family: Palatino;
    color: #414254;
        column-count: 3;
}

img {
    width: 90%;
    height: auto;
}

标签： htmlcsscss-multicolumn-layout

解决方案

您是否尝试将浮动添加到您的 CSS？

img {
    width: 90%;
    height: auto;
    float: left;
}

或者您可以尝试在此处阅读更多相关信息： 如何使用 HTML/CSS 将文本环绕在图像周围

推荐阅读