CSS Grid布局下文本无法环绕图片，求简单实现方案

你用CSS Grid分栏的方式没法实现文本自动环绕——Grid是把容器拆成固定列，文本只会在自身列内排布，不会绕到另一列元素周围。要达成你要的效果，用float属性是最简单的方案，不用复杂布局，直接让侧边的callout容器靠右浮动，文本自然就会环绕它。

修改后的完整代码 #

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]>      <html class="no-js"> <!--<![endif]-->
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Inter:wght@600&display=swap" rel="stylesheet">
        <link rel="stylesheet" href="">

        <style>
            /* 移除Grid布局，改用浮动实现环绕 */
            .callout{
                float: right;
                background: #000;
                width: 300px;
                height: auto;
                margin: 0 0 20px 20px; /* 控制和文本的间距 */
            }
            h1, p {
                font-family: 'Inter', sans-serif;
            }
            /* 可选：给main容器加最大宽度，避免文本太宽 */
            main {
                max-width: 1200px;
                margin: 0 auto;
                padding: 0 20px;
            }
        </style>
    </head>
    <body>
        <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
    <main>
        <article>
            <div class="callout">
                <h1 style="text-align: center;color: white;margin:0;"> STAND WITH ANNE </h1>
                <img style="max-width: 250px;height:auto;display: block;margin: 0 auto;padding:0;" src="http://old.annelewisllc.com/wp-content/uploads/2012/06/als-team-100-alewis.jpg" width="250" alt="">
                <a style="color:white;" href="http://www.annelewisllc.com/">
                    <p style="color:#ffffff;text-align:center">CLICK HERE TO ADD YOUR NAME</p>
                </a>
            </div>
            <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
            aliqua. Id ornare arcu odio ut sem nulla. In iaculis nunc sed augue lacus viverra vitae congue eu. Rutrum quisque non
            tellus orci ac auctor augue mauris augue. Urna porttitor rhoncus dolor purus. Habitant morbi tristique senectus et
            netus. Non consectetur a erat nam at lectus urna duis. Egestas fringilla phasellus faucibus scelerisque eleifend donec
            pretium. Tortor consequat id porta nibh venenatis cras sed. In massa tempor nec feugiat nisl pretium fusce id. Vulputate
            ut pharetra sit amet aliquam id diam maecenas. Libero nunc consequat interdum varius sit amet. Aliquet bibendum enim
            facilisis gravida neque convallis a cras semper.Sed euismod nisi porta lorem mollis aliquam. Non nisi est sit amet facilisis magna. Arcu cursus vitae congue mauris
            rhoncus aenean vel. Ac turpis egestas maecenas pharetra convallis posuere. Mollis nunc sed id semper risus in. Nec dui
            nunc mattis enim ut tellus. Aenean euismod elementum nisi quis eleifend quam adipiscing vitae. Nam at lectus urna duis
            convallis convallis tellus. Nisl condimentum id venenatis a. Neque vitae tempus quam pellentesque nec nam aliquam sem.
            Felis eget velit aliquet sagittis id consectetur purus. Egestas fringilla phasellus faucibus scelerisque eleifend donec
            pretium. Tortor condimentum lacinia quis vel eros donec ac. Odio tempor orci dapibus ultrices in iaculis nunc sed.</p>
          <br>
            <p>
            Gravida neque convallis a cras semper auctor neque vitae tempus. Diam quam nulla porttitor massa id neque aliquam. Eu
            turpis egestas pretium aenean pharetra magna ac placerat vestibulum. Tincidunt dui ut ornare lectus sit amet est. Enim
            neque volutpat ac tincidunt vitae semper quis. Suspendisse ultrices gravida dictum fusce ut placerat orci. In est ante
            in nibh mauris cursus mattis molestie a. Est ante in nibh mauris. Enim eu turpis egestas pretium aenean pharetra magna
            ac. In tellus integer feugiat scelerisque varius morbi enim nunc faucibus. Ac ut consequat semper viverra nam libero
            justo. Venenatis a condimentum vitae sapien pellentesque habitant. Quis risus sed vulputate odio ut. Morbi tincidunt augue interdum velit euismod in pellentesque.</p>
        </article>
    </main>
        
        <script src="" async defer></script>
    </body>
</html>

关键修改说明 #

1. 移除Grid布局：删掉.wrapper的Grid相关样式，Grid的分栏逻辑不适合文本环绕场景
2. 添加浮动属性：给.callout设置float: right，让它脱离正常文档流，文本会自动环绕在它左侧
3. 调整间距：给.callout加margin: 0 0 20px 20px，避免和文本贴得太近，提升可读性
4. 优化容器宽度：给main设置最大宽度和内边距，避免宽屏上文本拉得太宽，影响阅读体验

这样修改后就能完全实现你要的文本环绕效果，方案简单直接，不需要额外复杂属性。

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