CSS columns实现两端对齐布局的示例代码

实现两端对齐布局常常是前端开发的需求之一，CSS columns提供了一种简便的方式来实现。下面进行详细讲解：

什么是CSS columns?

CSS columns是CSS3的一个模块，它使得文本流可以按照指定的列数进行排版。它可以对任意的块状元素进行拆分，使得文本像报纸一样分布在列中，还可以自动分页。CSS columns还支持分列后实现两端对齐排版。

实现两端对齐布局的示例代码

代码示例1：利用CSS columns + text-align:justify 实现两端对齐

.container {
    columns: 2; /* 列数 */
    text-align: justify; /* 两端对齐 */
    column-gap: 20px; /* 列间距 */
}

上面的代码用CSS columns将元素拆分成两列，并使用text-align:justify实现两端对齐。同时通过设置column-gap属性实现列间距。

代码示例2：利用CSS columns + :after 伪元素 实现两端对齐

.container {
    columns: 2; /* 列数 */
    text-align: justify; /* 两端对齐 */
    column-gap: 20px; /* 列间距 */
}

.container::after {
    content: "";
    display: inline-block;
    width: 100%;
}

上面的代码利用CSS columns的列数和text-align:justify实现了两端对齐，同时通过一个隐藏的伪元素:after，使得最后一列内容水平撑开。

示例说明

示例1

HTML代码

<div class="container">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et elit quis nulla feugiat tincidunt eu non mauris. Sed vestibulum lectus ligula, vitae dignissim arcu gravida vel. Sed blandit massa ut sapien aliquet, ut bibendum metus vestibulum. Suspendisse at ex blandit, lobortis justo vel, molestie tellus. Cras maximus lectus quis velit laoreet scelerisque. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed et tellus iaculis, rhoncus ante vel, placerat sem. Donec turpis est, elementum a congue at, hendrerit sed tortor. Curabitur id blandit urna, at sodales dui. Aliquam erat volutpat. Suspendisse potenti. In tincidunt, sapien non vestibulum dignissim, arcu purus semper orci, vel condimentum velit nisl eget purus. Duis et eleifend urna, vel euismod nibh. Nulla facilisi.</p>
    <p>Phasellus posuere urna ex, quis pretium tellus pellentesque ac. Proin aliquet magna ac est pharetra congue. Praesent ut sem non justo ornare ultricies ut vel libero. Ut vulputate eget justo malesuada lobortis. Donec tempor rhoncus sapien, ut hendrerit ex vehicula eu. Sed ante tellus, gravida ut sapien vitae, volutpat tempus dolor. Praesent ultrices a purus sit amet sagittis. Nulla facilisi. Vestibulum rutrum libero euismod orci ullamcorper, ullamcorper iaculis nibh vulputate. Donec quis purus eu velit egestas imperdiet sed vitae ipsum. Suspendisse id fermentum lorem. Nulla vel est elit. In metus lectus, faucibus sit amet sollicitudin vitae, euismod a ipsum. Duis faucibus nibh id bibendum semper. Donec ullamcorper vel odio eget vulputate. Fusce blandit nisi velit, eget sodales ex fringilla at. Aliquam ut massa vel purus sodales suscipit.</p>
    <p>Donec ut libero pulvinar, ornare felis non, hendrerit neque. Nulla lobortis accumsan dui. Mauris tempor sagittis augue at fringilla. Aliquam dignissim faucibus lacus, vitae finibus quam sagittis id. Nullam lorem orci, pellentesque in nunc sed, dictum malesuada diam. Etiam in lobortis lacus. Maecenas nulla mi, pharetra a urna id, vestibulum suscipit nulla. Sed eget elementum metus. Duis id mi orci. Sed eget nisl in sapien consectetur ultrices a in dolor. Integer sollicitudin libero nec sapien consectetur, at ultricies leo gravida.</p>
</div>

CSS代码

.container {
    columns: 2; /* 列数 */
    text-align: justify; /* 两端对齐 */
    column-gap: 20px; /* 列间距 */
}

示例2

HTML代码

<div class="container">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et elit quis nulla feugiat tincidunt eu non mauris. Sed vestibulum lectus ligula, vitae dignissim arcu gravida vel. Sed blandit massa ut sapien aliquet, ut bibendum metus vestibulum. Suspendisse at ex blandit, lobortis justo vel, molestie tellus. Cras maximus lectus quis velit laoreet scelerisque. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed et tellus iaculis, rhoncus ante vel, placerat sem. Donec turpis est, elementum a congue at, hendrerit sed tortor. Curabitur id blandit urna, at sodales dui. Aliquam erat volutpat. Suspendisse potenti. In tincidunt, sapien non vestibulum dignissim, arcu purus semper orci, vel condimentum velit nisl eget purus. Duis et eleifend urna, vel euismod nibh. Nulla facilisi.</p>
    <p>Phasellus posuere urna ex, quis pretium tellus pellentesque ac. Proin aliquet magna ac est pharetra congue. Praesent ut sem non justo ornare ultricies ut vel libero. Ut vulputate eget justo malesuada lobortis. Donec tempor rhoncus sapien, ut hendrerit ex vehicula eu. Sed ante tellus, gravida ut sapien vitae, volutpat tempus dolor. Praesent ultrices a purus sit amet sagittis. Nulla facilisi. Vestibulum rutrum libero euismod orci ullamcorper, ullamcorper iaculis nibh vulputate. Donec quis purus eu velit egestas imperdiet sed vitae ipsum. Suspendisse id fermentum lorem. Nulla vel est elit. In metus lectus, faucibus sit amet sollicitudin vitae, euismod a ipsum. Duis faucibus nibh id bibendum semper. Donec ullamcorper vel odio eget vulputate. Fusce blandit nisi velit, eget sodales ex fringilla at. Aliquam ut massa vel purus sodales suscipit.</p>
    <p>Donec ut libero pulvinar, ornare felis non, hendrerit neque. Nulla lobortis accumsan dui. Mauris tempor sagittis augue at fringilla. Aliquam dignissim faucibus lacus, vitae finibus quam sagittis id. Nullam lorem orci, pellentesque in nunc sed, dictum malesuada diam. Etiam in lobortis lacus. Maecenas nulla mi, pharetra a urna id, vestibulum suscipit nulla. Sed eget elementum metus. Duis id mi orci. Sed eget nisl in sapien consectetur ultrices a in dolor. Integer sollicitudin libero nec sapien consectetur, at ultricies leo gravida.</p>
</div>

CSS代码

.container {
    columns: 2; /* 列数 */
    text-align: justify; /* 两端对齐 */
    column-gap: 20px; /* 列间距 */
}

.container::after {
    content: "";
    display: inline-block;
    width: 100%;
}

通过上述代码示例我们可以看到，通过CSS columns可以实现两端对齐布局，代码量很少，且效果非常好。