文本未包装在CSS网格中

Question

我一直在尝试使用CSS Grid，并且我一直在寻找最有效的方法让文本环绕<div>元素，该元素位于另外两个<div/>元素的顶部。基本上，如下图所示，我希望红色和蓝色div中的文本环绕黄色div，该黄色div已部分位于其他两个元素的列和行中。显然，这是一个基于网格的布局，所以我对使用典型的浮点数不感兴趣。如何使用CSS Grid来实现这种效果？

这是我的css和html：

＆＃13;

＆＃13;

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  grid-gap: 10px;
}

.red {
  background-color: red;
  grid-column: 1 / span 2;
  grid-row: 1 / span 4;
}

.blue {
  background-color: blue;
  grid-column: 3 / span 2;
  grid-row: 1 / span 4;
}

.yellow {
  background-color: yellow;
  grid-column: 2 / span 2;
  grid-row: 2 / 4;
}

＆＃13;

<div class="grid">
  <div class="red">According to the Oxford English Dictionary, hello is an alteration of hallo, hollo,[1] which came from Old High German "halâ, holâ, emphatic imperative of halôn, holôn to fetch, used especially in hailing a ferryman."[5] It also connects the development
    of hello to the influence of an earlier form, holla, whose origin is in the French holà (roughly, 'whoa there!', from French là 'there').[6] As in addition to hello, halloo,[7] hallo, hollo, hullo and (rarely) hillo also exist as variants or related
    words, the word can be spelt using any of all five vowels.[8][9][10]</div>
  <div class="blue">The use of hello as a telephone greeting has been credited to Thomas Edison; according to one source, he expressed his surprise with a misheard Hullo.[11] Alexander Graham Bell initially used Ahoy (as used on ships) as a telephone greeting.[12][13]
    However, in 1877, Edison wrote to T.B.A. David, the president of the Central District and Printing Telegraph Company of Pittsburgh: Friend David, I do not think we shall need a call bell as Hello! can be heard 10 to 20 feet away. What you think? Edison
    - P.S. first cost of sender & receiver to manufacture is only $7.00.[14] By 1889, central telephone exchange operators were known as 'hello-girls' because of the association between the greeting and the telephone.[13][15] By 1889, central telephone
    exchange operators were known as 'hello-girls' because of the association between the greeting and the telephone.[13][15] </div>
  <div class="yellow">3</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以使用exclusions，但是这些仅受Microsoft的Internet Explorer和Edge支持，应谨慎使用（目前，我们必须在属性前加上-ms-才能使用排除功能，但是并不总是以成功而告终）。简而言之，排除是内联流内容环绕的元素周围的区域。

当元素的wrap-flow属性具有除auto之外的计算值时，该元素将被排除在外，因此示例可能为.p { wrap-flow: maximum }。 wrap-margin属性用于设置排除区域周围的边距或偏移量。在这种情况下，您可以将.yellow { wrap-flow: both }放在CSS中，以允许其他div中的文本环绕黄色div。

wrap-flow: both

的示例

链接：Tutorial，browser support，specifications，tutorial

相关标签：html css css3 css-grid