如何在嵌套容器中实现文字环绕图片效果？

你当前的CSS设置把文字容器和图片容器各设为50%宽度并分别左右浮动，这会让两者各占一半空间，文字自然无法环绕图片。不需要修改HTML结构，只需调整CSS即可实现需求：

修改后的CSS代码 #

/* 移除文字容器的宽度和浮动限制，让文字能自由环绕 */
.text-container {
    width: auto;
    float: none;
}

/* 让图片容器向右浮动，固定在右上角 */
.img-container {
    float: right;
    /* 添加间距避免文字紧贴图片 */
    margin-left: 15px;
    margin-bottom: 10px;
}

.img-container img {
    /* 可根据需求设置图片宽度，比如固定200px，避免占满容器 */
    width: 200px;
    height: auto;
}

原理说明 #

• 去掉.text-container的float:left和固定宽度，让文字容器恢复默认的块级行为，文字会自动填充除浮动元素外的空间。
• .img-container设置float:right后，会脱离文档流并停靠在容器右上角，文字会环绕在它的左侧和下方。
• 添加margin是为了让文字和图片之间保留合适的间距，提升可读性。

完整代码示例 #

HTML（无需修改）

<div class="container">
    <div class="text-container">
        <div class="text-container-wrapper">
            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit.
                Ex deleniti voluptates placeat? Assumenda, magni
                maiores.
            </p>
            <p>
                Eveniet sunt cupiditate earum iusto, quam excepturi sint
                veniam ea rerum alias blanditiis repellendus.
                Voluptatum?
            </p>
            <p>
                Nulla voluptatibus possimus amet quas, ut tempore
                inventore qui quis sequi reprehenderit repellendus
                veniam porro?
            </p>
            <p>
                Suscipit beatae rem voluptates dolores. Iste dignissimos
                exercitationem dolorum placeat necessitatibus
                accusantium quod neque commodi.
            </p>
            <p>
                Laboriosam, quidem nostrum! Quis consectetur dolor
                laudantium animi, similique consequuntur minus ab.
                Fugiat, ipsam ullam.
            </p>
        </div>
    </div>
    <div class="img-container">
        <div class="img-container-wrapper">
            <img
                src="https://basava.codelinden.com/wp-content/plugins/elementor/assets/images/placeholder.png"
                alt=""
            />
        </div>
    </div>
</div>

内容的提问来源于stack exchange，提问作者Rocky Barua