是否可以让文本从一个容器流向另一个容器？

Question

在传统出版物中，通常在页面上的多列之间流动文本。

是否可以在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>

Answer 1

是的，你肯定可以在这种情况下使用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>