css3多列布局

最新推荐文章于 2023-01-04 17:38:33 发布

zheng_jia_jun

最新推荐文章于 2023-01-04 17:38:33 发布

阅读量236

点赞数

分类专栏：需要使用才学的技术文章标签： css3 safari css

本文链接：https://blog.csdn.net/zheng_jia_jun/article/details/126410575

版权

需要使用才学的技术专栏收录该内容

9 篇文章 0 订阅

订阅专栏

css3 多列布局

css3 新增了多列布局，该布局很好的帮助我们快速实现瀑布流布局，简单方便
在这里插入图片描述

多列布局属性

column-count
指定容器内需要分割的列数

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title> 
<style> 
/* 关键代码-----------------------------------------------------*/
.newspaper
{
	-moz-column-count:5; /* Firefox */
	-webkit-column-count:5; /* Safari and Chrome */
	column-count:5;
}
/* 关键代码-----------------------------------------------------*/
</style>
</head>
<body>

<p><b>注意:</b> Internet Explorer 9及更早 IE 版本浏览器不支持 column-count 属性。</p>

<div class="newspaper">
“当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。”
</div>

</body>
</html>

在这里插入图片描述

column-gap: 40px；
column-gap 设置每列之间的间距

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style> 
.newspaper
{
	column-count:5;
	column-gap:40px;
}
</style>
</head>
<body>

<div class="newspaper">
当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。
</div>

<p><b>注意:</b> Internet Explorer 9及更早 IE 版本浏览器不支持 column-count 属性。</p>

</body>
</html>

展示效果
在这里插入图片描述
column-rule-style: solid;
属性指定了列与列间的边框样式

column-rule-width : 5px
属性指定了两列的边框厚度

column-rule-color : red
属性指定了两列的边框颜色

column-rule: 1px solid lightblue;
一般我们用 column-rule即可，这个是以上三个的简写

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style> 
.newspaper
{

	column-count:3;
	column-gap:40px;
	column-rule:4px outset #ff00ff;
}
</style>
</head>
<body>

<p><b>注意:</b> Internet Explorer 9及更早 IE 版本浏览器不支持 column-count 属性。</p>

<div class="newspaper">
当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。
</div>

</body>
</html>

在这里插入图片描述
指定元素是否可以跨行
column-span: all;

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style> 
.newspaper
{
	column-count:3;
	-moz-column-count:3; /* Firefox */
	-webkit-column-count:3; /* Safari and Chrome */

}
h2
{
	// 可以跨越全部行
	column-span:all;

}
</style>
</head>
<body>

<p><b>注意:</b> Internet Explorer 9及更早 IE 版本浏览器不支持 column-count 属性。</p>

<div class="newspaper">
<h2>英国维斯米斯特教堂碑文</h2>
当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。
<h2>英国维斯米斯特教堂碑文</h2>
	当我年轻的时候，我梦想改变这个
	</div>

</body>
</html>

展示效果
在这里插入图片描述
column-width: 100px
设置每一列的宽度，多少列根据屏幕自适应，如果已经 column-count 设置了列数，则该属性不生效；

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style> 
.newspaper
{	
	column-width:50px;

}
</style>
</head>
<body>

<p><b>注意:</b> Internet Explorer 9及更早 IE 版本浏览器不支持 column-count 属性。</p>

<div class="newspaper">
当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。
</div>

</body>
</html>

展示效果
在这里插入图片描述
用多列布局写个简单的瀑布流

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>瀑布流</title>
</head>
<style>
    img {
        width: 100%;
    }
    .waterfall {
        /* 固定两列 */
        column-count: 2;
        /* 设置间距 */
        column-gap: 20px;
        /* 设置间距 */
        column-rule: 1px solid skyblue;
    }
    .waterfall h2 {
    	/* 设置跨越所有行*/
        column-span: all;
        text-align: center;
    }
</style>
<body>
    <div class="waterfall">
        <h2>动漫手机壁纸精选</h2>
        <img src="https://pica.zhimg.com/80/v2-4175dda90e026add5f28fa62b9915b0f_720w.jpg?source=1940ef5c" alt="">
        <img src="https://pic2.zhimg.com/80/v2-b2d89ab0bc709433b0fb50a07b33efcf_720w.jpg?source=1940ef5c" alt="">
        <img src="https://pic1.zhimg.com/80/v2-4966f3f534782ce9404b5b7d5f4d129c_720w.jpg?source=1940ef5c" alt="">
        <img src="https://pic3.zhimg.com/80/v2-8d780661852e6e331ff7e2500ee39e7b_720w.jpg?source=1940ef5c" alt="">
        <img src="https://pic3.zhimg.com/80/v2-1213bb4130a03b97f4339a5e5fee7b5a_720w.jpg?source=1940ef5c" alt="">
        <img src="https://picx.zhimg.com/80/v2-e49abe99c34e8ee81191371bb3b445f5_720w.jpg?source=1940ef5c" alt="">
        <img src="https://pic1.zhimg.com/80/v2-3ac10dd807eab379b49add5835dfe850_720w.jpg?source=1940ef5c" alt="">
        <img src="https://pica.zhimg.com/80/v2-9e7d75c8e13e8ec886ddfd31d2837cd3_720w.jpg?source=1940ef5c" alt="">
        <img src="https://pic2.zhimg.com/80/v2-7031619468f7a0bdc668eced0095ae2d_720w.jpg?source=1940ef5c" alt="">
        <img src="https://pic3.zhimg.com/80/v2-4c423e92f1a24eba8f57586ff4864961_720w.jpg?source=1940ef5c" alt="">
        <img src="https://pic1.zhimg.com/80/v2-125011a0a64adae5d82fb87f5d73e4d4_720w.jpg?source=1940ef5c" alt="">
    </div>
</body>
</html>

在这里插入图片描述

zheng_jia_jun

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3多列布局

* 关键代码-----------------------------------------------------*//* 关键代码-----------------------------------------------------*/设置每一列的宽度，多少列根据屏幕自适应，如果已经 column-count 设置了列数，则该属性不生效；属性指定了列与列间的边框样式。指定容器内需要分割的列数。属性指定了两列的边框厚度。属性指定了两列的边框颜色。/* 固定两列 *//* 设置间距 */...
复制链接

扫一扫

专栏目录