文本是否可以從一個容器流到另一個容器？

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>