【发布时间】：2018-06-10 10:16:53
【问题描述】：
我一直在尝试使用 CSS Grid，并坚持寻找最有效的方法来让文本环绕 <div> 元素，该元素部分位于其他两个 <div/> 元素之上。基本上，如下图所示，我希望红色和蓝色 div 中的文本环绕已部分位于其他两个元素的列和行中的黄色 div。显然，这是一个基于网格的布局，所以我对典型的浮动不感兴趣。如何使用 CSS Grid 来实现这个效果？
这是我的css和html：
.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;
}<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>【问题讨论】：
-
如果一个网格单元包含在两个网格元素中，这并不意味着其中一个元素的内容具有优先权并在另一个网格元素中产生间隙。它们只会重叠。您正在寻找 CSS exclusions 模块，该模块目前仅在 IE 10+ 和 Edge 中实现，是浮点数的升级。
-
尽管这项技术仍处于起步阶段（因此几乎没有得到支持），
shape-outside旨在准确解决您的问题以及更多问题 -
@feihcsim,
shape-outside目前与CSS shapes 一起使用，没有迹象表明它会与 CSS 网格兼容，而 CSS 排除很可能会兼容。 -
我不认为这是一种用于换行文本的 hack，而是一种受网格规范当前潜力限制的合法布局选项。有 css 排除或类似 grid-text-wrap 的东西会打开相当多的设计选项，特别是在杂志/报纸布局中。
-
@Dog，很公平。在网格布局中拥有它肯定是一个很酷的功能。也许在未来的版本中。