CSS佈局2列中的文本流入其他列

Question

在Microsoft Word中，您可以在文檔中創建兩列，當您到達一列的底部時，它會自動繼續到其旁邊的另一列的頂部。 我想知道這種行爲是否也可以在CSS？

當我谷歌和搜索它，我發現很多製作兩列網頁佈局，但這不是我想要的。 我希望文本流在其他列中自動繼續。

，這樣，如果你有這樣的：

<div class="twocolumns">lorem ipsum dolor est.........</div> 

，你得到

Lorem ipsum dolor sit amet,  ea commodo consequat. 
consectetur adipisicing elit,  Duis aute irure dolor 
sed do eiusmod tempor incididunt in reprehenderit in voluptate 
ut labore et dolore magna aliqua. velit esse cillum dolore 
Ut enim ad minim veniam, quis  eu fugiat nulla pariatur. 
nostrud exercitation ullamco 
laboris nisi ut aliquip ex 

這甚至可能單獨CSS？

Answer 1

你絕對可以用CSS3做到這一點。不幸的是，我不確定IE如何處理這個問題，但是一個墊片或者其他東西可能對此有所幫助。

HTML

<div class="twocolumns">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu mauris nec nisi tristique condimentum vitae sed orci. Vestibulum luctus hendrerit sem, ut sodales nibh rhoncus a. Mauris a diam mollis ante auctor aliquam. Sed cursus interdum nisl at condimentum. Cras gravida nulla sit amet nisi fringilla bibendum. Suspendisse blandit scelerisque arcu euismod facilisis. Sed ultrices tincidunt commodo. Phasellus sed justo libero. Donec venenatis sapien eu arcu feugiat vulputate. Praesent tortor mauris, tincidunt non venenatis sit amet, ultricies ac lacus. Praesent fermentum pharetra posuere. Quisque eget blandit lacus. Suspendisse eget diam justo. Donec eu urna nec metus consequat pellentesque id nec leo. Nam sodales sapien id tellus rhoncus pellentesque. Ut fringilla imperdiet rhoncus.</div> 

CSS

.twocolumns { 
padding:10px; 
    width:80%; 
    -moz-column-count: 2; 
    -moz-column-gap: 10px; 
    -webkit-column-count: 2; 
    -webkit-column-gap: 10px; 
    column-count: 2; 
    column-gap: 10px; 
} 

jsFiddle