如何使用 CSS3 在多列中排列文本？

有时我们在许多网站中看到，内容相互平行堆叠以显示更多内容以供阅读。报纸或书籍中也遵循这种模式，以便一次阅读内容。这种模式通常有助于在需要最少工作量的小区域内显示大尺寸内容。在本文中，我们将学习如何使用 HTML 和 CSS 以并行堆叠的方式将内容排列成多行。下图说明了这个概念。

在这里，您可以看到我们将内容显示在四个不同的行中，以使其看起来更舒适。仅使用 CSS 将文本排列在多列中是一项非常简单的任务。有可用的 CSS 属性，通过使用这些属性，我们可以创建任意数量的列，也可以设置列之间的间隙。所有必需的属性如下所述：

• CSS column-count ：此属性用于计算文档中应划分的列元素的数量。
• CSS 列间距：  此属性用于定义列之间的间隙。
• CSS 列规则样式： 此属性用于指定列之间的样式。
• CSS 列规则宽度： 此属性用于指定列之间的规则宽度。
• CSS 列规则颜色： 此属性用于定义列之间的颜色。
• CSS 列规则： 该属性用于定义列之间规则的样式、宽度、颜色。
• CSS 列跨度： 此属性用于定义应跨越多少列的元素。
• CSS 列宽： 此属性用于指定每列的宽度。

请参考 CSS |多列文章，用于创建多种不同样式的列文本。

方法：我们将使用两种不同的方法来完成这项任务：

• 通过使用定义元素可以划分的列数的 column-count 属性。
• 通过使用通用 CSS 属性，如 float、padding、text-align 和 width 属性。

我们将使用上述两种方法并通过示例来理解它们。

示例 1：在此示例中，我们将使用column-count属性并将该属性设置为 4，因此列数变为 4。

HTML

 

    

 

    
GeeksforGeeks
    

        A computer science portal for geeks
    
     
    

        Sudo Placement: Prepare for the Recruitment
        drive of product based companies like
        Microsoft, Amazon, Adobe etc with a free
        online placement preparation course. The
        course focuses on various MCQ's & Coding
        question likely to be asked in the
        interviews & make your upcoming placement
        season efficient and successful. Placement
        preparation solely depends on the company
        for which you are preparing. There are
        basically three different categories into
        which we can divide the companies visiting
        campuses for placements based on their
        recruitment process. Mass Recruiters, Tech
        Giants, Others / Start-ups Companies
        belonging to the above categories have
        their own recruitment process. In this
        course, we will try to cover every possible
        detail required to know for cracking interview
        of the companies falling in each of the above
        categories.
    

 

输出：

示例 2：在此示例中，我们将使用通用 CSS 属性以类似的方式排列多行列，以实现相同的输出。

HTML

 

    
 
    

 

    

        

            GeeksforGeeks
        
    
 
    

        

            
Column A
             

                Prepare for the Recruitment drive
                of product based companies like
                Microsoft, Amazon, Adobe etc with
                a free online placement preparation
                course. The course focuses on various
                MCQ's & Coding question likely to be
                asked in the interviews & make your
                upcoming placement season efficient
                and successful.
            
 
        
 
        

            
Column B
             

                Prepare for the Recruitment drive
                of product based companies like
                Microsoft, Amazon, Adobe etc with
                a free online placement preparation
                course. The course focuses on various
                MCQ's & Coding question likely to be
                asked in the interviews & make your
                upcoming placement season efficient
                and successful.
            
 
        
 
        

            
Column C
             

                Prepare for the Recruitment drive
                of product based companies like
                Microsoft, Amazon, Adobe etc with
                a free online placement preparation
                course. The course focuses on various
                MCQ's & Coding question likely to be
                asked in the interviews & make your
                upcoming placement season efficient
                and successful.
            
 
        
    

 

输出：