gpt4 book ai didi

html - 文本不在 CSS 网格中换行

转载 作者:太空狗 更新时间:2023-10-29 13:16:50 25 4
gpt4 key购买 nike

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

enter image description here

这是我的 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>

最佳答案

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

当一个元素的 wrap-flow 属性的计算值不是 auto 时,该元素将成为排除项,因此示例可能是 .p { wrap-flow: maximum }wrap-margin 属性设置排除区域周围的边距或偏移量。在您的情况下,您可以在 CSS 中放置 .yellow { wrap-flow: both } 以允许其他 div 中的文本环绕黄色 div。

环绕流示例:两者

enter image description here

链接:Tutorial , browser support , specifications , tutorial

相关标签:

关于html - 文本不在 CSS 网格中换行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48031648/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com