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

【问题标题】：How do I make an image span multiple columns while having text wrap around it?如何使图像跨越多个列，同时让文本环绕它？
【发布时间】：2019-08-27 22:00:30
【问题描述】：

我有一个 html 元素使用column-count: 3; 分成 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;
}

【问题讨论】：

这在 CSS 中是不可能的。您可以使用 column-count 跨越多个列，但只能跨越所有列。如果需要文本环绕图像，则没有其他方法。 - quackit.com/css/css3/properties/css_column-span.cfm

标签： html css css-multicolumn-layout

【解决方案1】：

您是否尝试将浮点数添加到您的 css 中？

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

或者您可以尝试在此处阅读更多相关信息： How to wrap text around an image using HTML/CSS

【讨论】：