如何使用CSS將列的內容溢出到下一列？

Question

我有一個表，其中我試圖讓一些長的段落動態從第一列到第二列，然後到第三列。目前，當第一列溢出而不是移動到第二列時，表格將繼續在下一頁，因此我得到的頁面只填充了一列的數據。我怎樣才能解決這個問題？

Answer 1

它可以用CSS3完成，但大多數瀏覽器還不支持這些屬性。 鏈接在這裏：Multi-column layout

這裏還有一個jQuery插件。 http://code.google.com/p/js-columns/

編輯2016 爲多列布局的column-count CSS屬性被所有主流瀏覽器（http://www.w3schools.com/css/css3_multiple_columns.asp）的支持。

演示：

.newspaper { 
 
    -webkit-column-count: 3; /* Chrome, Safari, Opera */ 
 
    -moz-column-count: 3; /* Firefox */ 
 
    column-count: 3; 
 
}

<p><b>Note:</b> Internet Explorer 9, and earlier versions, does not support the column-count property.</p> 
 

 
<div class="newspaper"> 
 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. 
 
</div>