html - 是否可以在 css 中将文本环绕在多个图像的顶部和底部？

Question

这是我想要重新创建的那种杂志风格效果:

使用 float 我似乎只能实现文本在下方流动。

使用 shape-outside 我似乎一次只能为每个文本格使用一个形状。理想情况下，我会针对同一个 div 使用多个。

我也尝试过使用 css 网格，尝试使用这种效果将文本环绕在一张图片的顶部和底部:

.mygrid {
    display: grid;
    grid-template-rows: 150px 150px 150px;
    grid-template-columns: 150px 150px;
    grid-template-areas:
        "para para"
        "image para"
        "para para";
}


.lorem {
    background-color: red;
    grid-area: para;
}

.image {
    background-color: blue;
    grid-area: image;
}

<div class="mygrid">
        <div class="lorem">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta ipsam, iure facilis optio eum dignissimos. Quis aliquam inventore a sit quo est ut voluptas nesciunt iure, veniam consequuntur! Error, recusandae!</div>
        <div class="im">I'm the image!</div>
    </div>

Answer 1

您寻找的是典型的 float 用法。 网格还不能做这些事情，通过不同的网格单元流动文本

例子

.l{float:left;}
.r{float:right}

/* demo */
img{padding: .25em .25em 0;}
p{width:400px;border:solid;margin:1em auto;}

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.<img class="l" src="https://dummyimage.com/100x50"> Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.<img class="r" src="https://dummyimage.com/100x50"> Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>

根据您发布的代码，删除网格系统并改用 float ，一个选项可能是:(在流程中提前设置图像)

.mygrid {
  width:300px;
}
.mygrid:before {
  height:150px;
  float:left;
  content:''
}
.im{
  clear:left;
  float:left;
  width:150px;
  height:150px;
  background:gray;
  display:grid;
  align-content:center;
  text-align:center;
}

/* 2 images ? */

body{
display:flex;justify-content:space-between;
}
.im~.im {float:right;}
.mygrid+.mygrid .im {background:silver}
.lorem:before{
  content:'';
  float:left;
  height:300px;
}

<div class="mygrid">
  <div class="im">I'm the image!</div>
  <div class="lorem">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta ipsam, iure facilis optio eum dignissimos. Quis aliquam inventore a sit quo est ut voluptas nesciunt iure, veniam consequuntur! Error, recusandae!</div>
  <div class="lorem">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta ipsam, iure facilis optio eum dignissimos. Quis aliquam inventore a sit quo est ut voluptas nesciunt iure, veniam consequuntur! Error, recusandae!</div>
  <div class="lorem">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta ipsam, iure facilis optio eum dignissimos. Quis aliquam inventore a sit quo est ut voluptas nesciunt iure, veniam consequuntur! Error, recusandae!</div>
  <div class="lorem">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta ipsam, iure facilis optio eum dignissimos. Quis aliquam inventore a sit quo est ut voluptas nesciunt iure, veniam consequuntur! Error, recusandae!</div>
  <div class="lorem">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta ipsam, iure facilis optio eum dignissimos. Quis aliquam inventore a sit quo est ut voluptas nesciunt iure, veniam consequuntur! Error, recusandae!</div>

</div>

<div class="mygrid">
  <div class="im">I'm the image!</div>
  <div class="lorem">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta ipsam, iure facilis optio eum dignissimos. Quis aliquam inventore a sit quo est ut voluptas nesciunt iure, veniam consequuntur! Error, recusandae!</div>
  <div class="lorem">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta ipsam, iure facilis optio eum dignissimos. Quis aliquam inventore a sit quo est ut voluptas nesciunt iure, veniam consequuntur! Error, recusandae!</div>
  <div class="im">I'm the image!</div>
  <div class="lorem">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta ipsam, iure facilis optio eum dignissimos. Quis aliquam inventore a sit quo est ut voluptas nesciunt iure, veniam consequuntur! Error, recusandae!</div>
  <div class="lorem">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta ipsam, iure facilis optio eum dignissimos. Quis aliquam inventore a sit quo est ut voluptas nesciunt iure, veniam consequuntur! Error, recusandae!</div>
  <div class="lorem">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta ipsam, iure facilis optio eum dignissimos. Quis aliquam inventore a sit quo est ut voluptas nesciunt iure, veniam consequuntur! Error, recusandae!</div>

</div>