@ Собака, достаточно честно. Конечно, это было бы круто, чтобы иметь в Grid Layout. Возможно в будущей версии.

периментировал с CSS Grid и застрял в поиске наиболее эффективных средств для обтекания текста<div> элемент, который расположен частично поверх двух других<div/> элементы. По сути, как и на изображении ниже, я хочу, чтобы текст в красных и синих div-элементах обернулся вокруг желтого div-элемента, который был частично расположен в столбцах и строках двух других элементов. Очевидно, что это макет на основе Grid, поэтому мне не интересно делать это с типичными числами. Как я могу использовать 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>

 Andrei Gheorghiu30 дек. 2017 г., 08:32
@feihcsim,shape-outside в настоящее время работает сCSS формы и нет никаких признаков того, что он когда-либо будет совместим с сетками CSS, в то время как исключения CSS, скорее всего, будут.
 Dog30 дек. 2017 г., 17:38
я не рассматриваю это как хак для переноса текста, но допустимый вариант макета, который ограничен текущим потенциалом спецификации сетки. исключение CSS или что-то вроде grid-text-wrap открыло бы значительные варианты дизайна, особенно в макете журнала / газеты.
 Michael_B11 февр. 2018 г., 18:16
@ Собака, достаточно честно. Конечно, это было бы круто, чтобы иметь в Grid Layout. Возможно в будущей версии.
 feihcsim30 дек. 2017 г., 08:20
Хотя технология, которая все еще находится в зачаточном состоянии (и в результате едва поддерживается),shape-outside стремится решить именно вашу проблему и многое другое
 Andrei Gheorghiu30 дек. 2017 г., 08:09
Если ячейка сетки включена в два элемента сетки, это не означает, что содержимое одного из них будет иметь приоритет и создаст пробел в другом. Они будут просто перекрываться. Вы ищетеCSS исключения Модуль, который в настоящее время реализован только в IE 10+ и Edge и является обновлением поплавков.

Ответы на вопрос(0)

Ваш ответ на вопрос