Возможно ли иметь поток текста из одного контейнера в другой? - PullRequest
1 голос
/ 14 марта 2019

В традиционных публикациях часто встречается поток текста между несколькими столбцами на странице.

Можно ли сделать что-нибудь подобное в HTML и CSS?

Есть ли что-нибудь, где вы можете определить столбцы и текстовые потоки между ними:

<div columns="2">It was so beautiful out on the country, it was summer...</div>

И он создает что-то вроде этого (псевдокод):

#container {
  display:flex;
}
#column1, #column2 {
  flex: 1;
  text-align: justify;
  margin: 10px;
}
<div id="container">
<div id="column1">It was so beautiful out on the country, it was summer- the wheat fields were golden, the oats were green, and down among the green meadows the hay was stacked. There the stork minced about on his red legs, clacking away in Egyptian, which was the language his mother had taught him. Round about the field and meadow lands rose vast forests, in which deep lakes lay hidden. Yes, it was indeed lovely out there in the country.

In the midst of the sunshine there stood an old manor house that had a deep moat around it. From the walls</div>

<div id="column2"> of the manor right down to the water's edge great burdock leaves grew, and there were some so tall that little children could stand upright beneath the biggest of them. In this wilderness of leaves, which was as dense as the forests itself, a duck sat on her nest, hatching her ducklings. She was becoming somewhat weary, because sitting is such a dull business and scarcely anyone came to see her. The other ducks would much rather swim in the moat than waddle out and squat under the burdock leaf to gossip with her.</div></div>

1 Ответ

2 голосов
/ 14 марта 2019

Да, в этом случае вы можете использовать column-count вместо flex.Например:

div {
  column-count: 2;

  /* below properties are only for beautification purpose */  
  column-gap: 20px;
  text-align: justify;
  padding: 10px;
}
<div>
  It was so beautiful out on the country, it was summer- the wheat fields were golden, the oats were green, and down among the green meadows the hay was stacked. There the stork minced about on his red legs, clacking away in Egyptian, which was the language his mother had taught him. Round about the field and meadow lands rose vast forests, in which deep lakes lay hidden. 

  Yes, it was indeed lovely out there in the country. In the midst of the sunshine there stood an old manor house that had a deep moat around it. From the walls of the manor right down to the water's edge great burdock leaves grew, and there were some so tall that little children could stand upright beneath the biggest of them. In this wilderness of leaves, which was as dense as the forests itself, a duck sat on her nest, hatching her ducklings. She was becoming somewhat weary, because sitting is such a dull business and scarcely anyone came to see her. The other ducks would much rather swim in the moat than waddle out and squat under the burdock leaf to gossip with her.
</div>

Здесь можно настроить column-count для количества ожидаемых столбцов.


Если вы ищетеflex решение (после того, как я написал этот xD, я понял, что вы похожи), вы можете попробовать приведенный ниже код.Здесь я объявляю родительский элемент div как flex, а затем устанавливаю каждый из p в 33.33% с flex-grow равным 1, что больше похоже на то, насколько должен расти элементотносительно остальных изгибаемых элементов.Тем не менее, это больше ручная работа, чем column-count, поэтому я бы порекомендовал вам перейти к предыдущему решению, чем это.

div {
  display: flex;
  flex-wrap: wrap;
}

div > p {
  flex-grow: 1;
  width: 33.33%;
  height: 100px;
  text-align: justify;
  margin: 10px;
}
<div>
  <p>
    It was so beautiful out on the country, it was summer- the wheat fields were golden, the oats were green, and down among the green meadows the hay was stacked. There the stork minced
  </p>
  <p>
     about on his red legs, clacking away in Egyptian, which was the language his mother had taught him. Round about the field and meadow lands rose vast forests, in which deep lakes lay hidden.
  </p>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...