如何实现Div块环绕圆形布局？已用shape-outside未达预期

你要实现的是左侧圆形图片、右侧文本围绕圆形边缘弧形排列的布局，但当前代码里文本和图片完全分离，没达到环绕效果，问题根源和修正方法如下：

问题原因 #

你给.cont加了display:flex，每个文本块都成了独立的flex容器，被隔离在自己的布局空间里，没法和左侧浮动的图片产生shape-outside需要的环绕交互。shape-outside要求文本必须处于和浮动元素同一层级的文档流中，才能实现环绕。

修正代码 #

CSS部分 #

.container {
    max-width: 1366px;
    margin: 0 auto;
    padding: 2rem; /* 添加上下内边距，避免内容贴容器边缘 */
}

.img-wrapper {
    border-radius: 50%;
    width: 427px;
    height: 427px;
    /* 明确圆形的中心和大小，和容器圆角完全匹配 */
    shape-outside: circle(50% at 50% 50%);
    float: left;
    overflow: hidden;
    margin-right: 3rem;
    margin-top: 4rem; /* 调小顶部边距，让图片和文本顶部对齐更自然 */
}

.image{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 去掉flex，给文本块加间距，优化排版 */
.cont{
    margin-bottom: 2rem;
}

.cont h2 {
    margin-top: 0; /* 去掉标题默认上边距，让排版更紧凑 */
}

HTML部分（无需修改，保持原结构即可） #

<div class="container">
    <div class="img-wrapper">
        <img src="https://picsum.photos/id/237/200/300" loading="lazy" alt="" class="image">
    </div>
    <div class="content-wrapper">
        <div class="cont">
            <h2>Lorem ipsum dolor sit amet</h2>
            <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
            </p>
        </div>
        <div class="cont">
            <h2>Lorem ipsum dolor sit amet</h2>
            <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
            </p>
        </div>
        <div class="cont">
            <h2>Lorem ipsum dolor sit amet</h2>
            <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
            </p>
        </div>
        <div class="cont">
            <h2>Lorem ipsum dolor sit amet</h2>
            <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
            </p>
        </div>
    </div>
</div>

核心要点 #

1. 必须移除.cont的display:flex，让文本回到正常文档流，才能和浮动图片产生环绕
2. shape-outside: circle(50% at 50% 50%) 确保圆形区域和图片容器完全匹配，避免环绕偏差
3. 调整外边距和内边距，让整体布局更贴近你想要的效果

内容的提问来源于stack exchange，提问作者Monk Jie