数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社科
时尚研究
法律研究使用 CSS3 设置列间距
要设置网页上的列间隙，请使用 column-gap 属性。可以将值设置为 −
column-gap: length|normal|initial|inherit;
值可以是 −
长度 − 列之间的间隙
normal − 列之间有一个正常间隙
列之间的间隙
要设置列之间的间隙，我们设置了一个长度单位，即 −
column-gap: 25px;
示例
我们来看一个在列之间设置间隙的示例 −
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
column-count: 4;
-webkit-column-count: 4; /* Chrome, Safari, Opera */
-moz-column-count: 4; /* Firefox */
-webkit-column-gap: 25px; /* Chrome, Safari, Opera */
-moz-column-gap: 25px; /* Firefox */
column-gap: 25px;
}
</style>
</head>
<body>
<h1>Machine Learning</h1>
<div class="demo">
Today’s Artificial Intelligence (AI) has far surpassed the hype of blockchain and quantum computing.
This is due to the fact that huge computing resources are easily available to the common man.
The developers now take advantage of this in creating new Machine Learning models and to re-train
the existing models for better performance and results. The easy availability of High Performance
Computing (HPC) has resulted in a sudden increased demand for IT professionals having Machine Learning skills.
</div>
</body>
</html>
列之间有一个正常间隙
要设置正常间隙，请使用 column-gap 属性并将其设置为 normal −
column-gap: normal;
示例
下面我们来看一个设置正常间隙的示例 −
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
column-count: 2;
-webkit-column-count: 2; /* Chrome, Safari, Opera */
-moz-column-count: 2; /* Firefox */
-webkit-column-gap: normal; /* Chrome, Safari, Opera */
-moz-column-gap: normal; /* Firefox */
column-gap: normal;
}
</style>
</head>
<body>
<h1>Machine Learning</h1>
<div class="demo">
Today’s Artificial Intelligence (AI) has far surpassed the hype of blockchain and quantum computing. This is due to the fact that huge computing resources are easily available to the common man. The developers now take advantage of this in creating new Machine Learning models and to re-train the existing models for better performance and results. The easy availability of High Performance Computing (HPC) has resulted in a sudden increased demand for IT professionals having Machine Learning skills.
</div>
</body>
</html>
网格中列之间的间隔
要设置网格中列之间的间隙，请使用 column-gap 属性。使用 display 属性和值 grid 创建网格布局 −
#container {
display: grid;
border: 2px dashed blue;
background-color: red;
column-gap: 20px;
grid-template-columns: repeat(4,1fr);
}
示例
我们来看一个示例 −
<!DOCTYPE html>
<html>
<head>
<style>
#container {
display: grid;
border: 2px dashed blue;
background-color: red;
column-gap: 20px;
grid-template-columns: repeat(4,1fr);
}
#container > div {
border: 2px dotted green;
padding: 25px;
background-color: blue;
color: white;
}
</style>
</head>
<body>
<h1>Demo Heading</h1>
<div id="container">
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
<div>E</div>
<div>F</div>
<div>G</div>
<div>H</div>
</div>
</body>
</html>
flexbox 容器中列之间的间隙
要在弹性布局容器中设置各列之间的间距，使用具有 flex- 值的 display 属性
#container {
display: flex;
flex-wrap: wrap;
border: 2px dashed blue;
background-color: red;
column-gap: 40px;
}
示例
让我们看一个示例 −
<!DOCTYPE html>
<html>
<head>
<style>
#container {
display: flex;
flex-wrap: wrap;
border: 2px dashed blue;
background-color: red;
column-gap: 40px;
}
#container > div {
width: 12%;
border: 2px dotted green;
padding: 25px;
background-color: blue;
color: white;
}
</style>
</head>
<body>
<h1>Demo Heading</h1>
<div id="container">
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
<div>E</div>
<div>F</div>
<div>G</div>
<div>H</div>
</div>
</body>
</html>
更新日期： 27-12-2023
114 次浏览
广告