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

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 ，然后将flex-grow设置为1 ，将每个p设置为33.33% ，这更像是该元素应相对于其余flex项目增加多少。 尽管如此，这比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>